import Vue from 'vue/dist/vue'
import EventBus from "../util/EventBus";
import EventTypes from "../util/EventTypes";

Vue.component('brick-btn-add-section', {
    delimiters: ['<<', '>>'],
    props: [
        'brick',
        'builder',
    ],
    data: function () {
        return {
            isLoading: false,
            step: 0,
            selectedLayout: null,
            selectedBrickType: 'brick.section',
            selectedTemplate: null,
        };
    },
    methods: {
        beginLoading: function () {
            this.isLoading = true;
        },
        finishLoading: function () {
            this.isLoading = false;
        },
        layout: function () {
            this.step = 1;
        },
        template: function () {
            this.step = 2;
        },
        hide: function () {
            this.step = 0;
        },
        selectLayout: function (type) {
            this.selectedLayout = type;
            EventBus.emitEvent(EventTypes.BRICK_ADD, this);
        },
        selectTemplate(id) {
            this.selectedTemplate = id;
            EventBus.emitEvent(EventTypes.BRICK_TEMPLATE_ADD, this);
        },
        deleteTemplate(id) {
            if (!confirm('Vous êtes sur le point de supprimer un template. Cette action est irréversible.')) {
                return;
            }

            this.selectedTemplate = id;
            EventBus.emitEvent(EventTypes.BRICK_TEMPLATE_DELETE, this);
        }
    },
    template: `
      <div class="brick-add-section mt-4">
        <div class="p-4 rounded border-dashed">
          <div class="d-flex" v-if="step === 0">
              <button
                  v-on:click="layout()"
                  class="btn btn-sm brick-action d-flex align-items-center w-50 mr-2 "
              >
                <img src="/bundles/autoadmin/back/images/builder/add-manual.png" alt="Add manual" width="100">
                <i class="fas fa-plus"></i>
                <span class="text-left">Ajoutez manuellement vos sections, lignes et colones</span>
              </button>
              <button
                  v-on:click="template()"
                  class="btn btn-sm brick-action d-flex align-items-center w-50 ml-2"
              >
                <img src="/bundles/autoadmin/back/images/builder/add-template.png" alt="Add template" width="100">
                <i class="far fa-folder-open"></i>
                <span class="text-left">Choisir une section préconfigurée dans la bibliothèque de templates</span>
              </button>
          </div>

          <brick-layout v-if="step === 1 && !this.isLoading" :builder="builder" :selectLayout="selectLayout" />
          <brick-template v-if="step === 2 && !this.isLoading" :builder="builder" :selectTemplate="selectTemplate" :deleteTemplate="deleteTemplate" />
          <div v-if="this.isLoading" v-html="this.builder.context.loader" ></div>

          <div class="d-flex mt-2" v-if="!this.isLoading">
            <span class="w-100 text-center description" v-if="step === 1">Sélectionnez la mise en page souhaitée</span>
            <span class="w-100 text-center description" v-if="step === 2">Sélectionnez le template souhaité</span>
            <button class="btn btn-secondary cancel-add-section" v-if="step !== 0" v-on:click="hide">Retour</button>
          </div>
        </div>
      </div>
    `,
});
