import Vue from 'vue/dist/vue'
import BuilderClient from "../api/BuilderClient";
import EventBus from "../util/EventBus";
import EventTypes from "../util/EventTypes";
import TreeHandler from "../util/TreeHandler";
import PositionHelper from "../util/PositionHelper";

Vue.component('brick-layout-update', {
    delimiters: ['<<', '>>'],
    props: [
        'builder',
    ],
    data: function () {
        return {
            layouts: [],
            visible: false,
            position: 0,
            treeHandler: TreeHandler,
            isLoading: false,
            selectedLayout: null,
            currentColumnNumber: null,
        };
    },
    methods: {
        show(brickComp) {
            this.brick = brickComp.brick;
            this.position = PositionHelper.setDrawerPosition(brickComp.$el.getBoundingClientRect().top);
            this.visible = true;
            this.currentColumnNumber = brickComp.brick.children[0].children.length;

            this.getLayouts();
        },
        hide() {
            this.visible = false;
        },
        beginLoading: function () {
            this.isLoading = true;
        },
        finishLoading: function () {
            this.isLoading = false;
        },
        getLayouts() {
            this.beginLoading();
            BuilderClient
                .getLayouts()
                .then((json) => {
                    this.layouts =  json;
                    this.finishLoading();
                });
        },
        selectLayout(layout) {
            if (this.isSmaller(layout) && !confirm('Vous êtes sur le point de changer la mise en page de la section par un nombre de colonnes inférieur. Le contenu des premières colonnes sera conservé.')) {
                return;
            }

            this.selectedLayout = layout;
            EventBus.emitEvent(EventTypes.BRICK_LAYOUT_UPDATE, this);
        },
        isSmaller(layout) {
            return layout.toString().split('_').length < parseInt(this.currentColumnNumber);
        },
        isSelected(layout) {
            this.findBrickById(this.builder.rootBrick, this.brick.id);
            return this.selectedLayout === layout;
        },
        findBrickById(brick, id) {
            brick.children.forEach((brick) => {
                if (brick.id === id) {
                    let layout = 100;
                    if (brick.children[0].settings.column_pattern) {
                        layout = brick.children[0].settings.column_pattern;
                    }
                    this.selectedLayout = layout;
                }
                this.findBrickById(brick, id);
            });
        }
    },
    mounted() {
        EventBus.$on(EventTypes.BRICK_LAYOUT_UPDATE_SHOW, this.show);
    },
    template: `
      <div
        class="drawer"
        :class="{'drawer-opened': visible}"
        :style="'top: ' + position + 'px'"
      >
        <div class="inner-wrap">
          <div class="drawer-title-bar d-flex">
            <h1 class="inner-title">Changer la mise en page de la section</h1>
            <button
              class="drawer-close btn btn-primary"
              @click="hide()"
            >
              <i class="fa fa-close"></i>
            </button>
          </div>
          <div v-if="this.isLoading" v-html="this.builder.context.loader" ></div>
          <div v-if="!this.isLoading" class="inner">
            <div class="d-flex flex-wrap justify-content-center">
              <button
                  v-for="layout in layouts"
                  class="layout"
                  :class="{
                    'smaller': isSmaller(layout.value),
                    'selected': isSelected(layout.value)
                  }"
                  v-on:click="selectLayout(layout.value)"
                  :title="layout.label"
              >
                <img :src="layout.image" :alt="layout.label" width="80" height="40">
              </button>
            </div>
          </div>
        </div>
      </div>
    `,
});