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

Vue.component('brick-drawer', {
    delimiters: ['<<', '>>'],
    props: {
        'state': {},
        'builder': {
            default: null,
        },
    },
    data: function () {
        return {
            bodyEl: document.querySelector('body'),
            loading: true,
            visible: false,
            title: '',
            html: '',
            errors: [],
            operation: null,
            extra: {},
            position: 0,
        };
    },
    methods: {
        show(positionRectTop) {
            this.position = PositionHelper.setDrawerPosition(positionRectTop);

            if (!this.bodyEl.classList.contains('opened-drawer')) {
                this.bodyEl.classList.add('opened-drawer');
            }

            this.visible = true;
        },
        hide() {
            if (this.bodyEl.classList.contains('opened-drawer')) {
                this.bodyEl.classList.remove('opened-drawer');
            }

            this.visible = false;
            this.reset();
        },
        expand() {
            let drawerOpenedElement = document.querySelector('.drawer.drawer-opened');
            let parentElement = document.querySelector('#brick-builder-app').parentElement;
            if (drawerOpenedElement) {
                drawerOpenedElement.classList.toggle('expanded-drawer');
            }
            if (parentElement && parentElement.classList.contains('col-12')) {
                parentElement.classList.toggle('position-initial');
            }
        },
        toggleIconClass(event) {
            let iconElement = event.target.querySelector('i');
            if (iconElement.classList.contains('fa-up-right-and-down-left-from-center')) {
                iconElement.classList.remove('fa-up-right-and-down-left-from-center');
                iconElement.classList.add('fa-down-left-and-up-right-to-center');
            } else {
                iconElement.classList.remove('fa-down-left-and-up-right-to-center');
                iconElement.classList.add('fa-up-right-and-down-left-from-center');
            }
        },
        toggle(positionRectTop) {
            this.visible ? this.hide() : this.show(positionRectTop);
        },
        startLoading() {
            this.loading = true;
            this.title = '';
            this.errors = [];
        },
        finishLoading() {
            this.loading = false;
        },
        setData(data) {
            this.errors = [];
            if (typeof data != 'undefined') {
                Object.keys(data).forEach((k) => {
                    this[k] = data[k];
                });
                if (this.operation === 'update') {
                    BrickEditFormHandler.setup(this);
                }
            }
        },
        reset() {
            this.loading = true;
            this.visible = false;
            this.title = '';
            this.html = '';
            this.errors = [];
            let drawerOpenedElement = document.querySelector('.drawer.drawer-opened');
            let parentElement = document.querySelector('#brick-builder-app').parentElement;
            if (drawerOpenedElement && drawerOpenedElement.classList.contains('expanded-drawer')) {
                drawerOpenedElement.classList.remove('expanded-drawer');
            }
            if (parentElement && parentElement.classList.contains('position-initial')) {
                parentElement.classList.remove('position-initial');
            }
        }
    },
    created() {
    },
    mounted() {
        this.loading = this.state.loading;
        this.visible = this.state.visible;
        this.title = this.state.title;
        this.html = this.state.html;
        this.errors = this.state.errors;

        EventBus.$on(EventTypes.DRAWER_SHOW, this.show);
        EventBus.$on(EventTypes.DRAWER_CLOSE, this.hide);
        EventBus.$on(EventTypes.DRAWER_TOGGLE, this.toggle);
        EventBus.$on(EventTypes.DRAWER_LOADING_START, this.startLoading);
        EventBus.$on(EventTypes.DRAWER_LOADING_FINISH, this.finishLoading);
        EventBus.$on(EventTypes.DRAWER_SET_DATA, this.setData);
        EventBus.$on(EventTypes.DRAWER_RESET, this.reset);
    },
    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">Paramètres de la brique</h1>
            <button
                class="drawer-expand btn btn-primary"
                @click="expand(); toggleIconClass($event)"
            >
                <i class="fa fa-up-right-and-down-left-from-center"></i>
            </button>
          <button
              class="drawer-close btn btn-primary"
              @click="hide()"
          >
            <i class="fa fa-close"></i>
          </button>
        </div>
        <div v-if="this.errors && this.errors.length > 0" class="alert-danger px-2 py-1 mb-3 rounded">
          <i class="fa fa-warning"></i> Impossible de sauvegarder, certaines conditions ne sont pas remplies.
        </div>
        <div v-if="this.loading"
             class="inner"
             v-html="builder.context.loader"
        ></div>
        <div v-else
             class="inner"
             v-html="this.html"></div>
      </div>
      </div>
    `,
});
