import Vue from 'vue';
import flatpickr from 'flatpickr';
import NumberArrows from '@core/js/plugins/mtc_number_arrows.js';
import Overlay from '@site_scripts/mtc_overlay.js';

// Vue delimiters as [% %] due to conflict with Twig template tags.
Vue.config.delimiters = ['[%', '%]'];
Vue.config.unsafeDelimiters = ['[%%', '%%]'];

/**
 * v-overlay
 *
 * Binds the vanilla Overlay class to the element so clicking it opens
 * the overlay panel. Picks the right content_class based on whether the
 * element has `.transparentOverlay`.
 */
Vue.directive('overlay', {
    bind(el) {
        const overlayClass = el.classList.contains('transparentOverlay')
            ? 'transparentOverlay'
            : 'standardOverlay';
        Overlay.attach(el, { content_class: overlayClass });
    },
});

/**
 * v-tinymce
 *
 * Admin-only editor integration. Out of scope for the public front-end
 * removal effort — the admin spec will handle this directive later.
 */
Vue.directive('tinymce', {
    twoWay: true,
    deep: true,
    bind() {
        // Admin-only — tinymce isn't loaded on the public front-end, so
        // this directive is a no-op there. Bail before doing any work on
        // the pages where tinymce never loads.
        if (typeof window.tinymce === 'undefined') {
            return;
        }
        const id = this.el.getAttribute('id');
        const handle = this;
        window.tinymce.init({
            selector: '#' + id,
            theme: 'modern',
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table contextmenu paste',
            ],
            menubar: false,
            statusbar: false,
            convert_fonts_to_spans: true,
            paste_as_text: true,
            relative_urls: false,
            remove_script_host: false,
            convert_urls: true,
            body_class: 'wysiwygContent',
            width: 476,
            height: 150,
            resize: 'both',
            advlist_bullet_styles: 'Default',
            advlist_number_styles: 'Default',
            toolbar: 'bold italic | bullist numlist | link unlink',
            contextmenu: 'link image inserttable | cell row column deletetable code',
            file_picker_callback: window.openFilePicker,
            setup(editor) {
                editor.on('change', (event) => {
                    handle.set(event.level.content);
                });
            },
        });
    },
});

/**
 * v-date-picker
 *
 * Vanilla flatpickr replacement for the previous jquery-ui datepicker.
 * Reads optional `data-mindate` (Y-m-d format) as the earliest selectable
 * date. The picker stores its instance on the element so unbind can clean
 * it up cleanly.
 */
Vue.directive('date-picker', {
    bind(el) {
        const minDate = el.dataset?.mindate || null;
        el._flatpickr = flatpickr(el, {
            dateFormat: 'd/m/Y',
            allowInput: true,
            minDate: minDate || undefined,
        });
    },
    unbind(el) {
        el._flatpickr?.destroy();
        el._flatpickr = null;
    },
});

/**
 * v-number-arrows
 *
 * Wraps an input with + / − quantity buttons via the vanilla NumberArrows
 * class. The instance is attached to the element so unbind can tear it
 * down without leaking listeners or markup.
 */
Vue.directive('number-arrows', {
    bind(el) {
        el._numberArrows = new NumberArrows(el);
    },
    unbind(el) {
        el._numberArrows?.destroy();
        el._numberArrows = null;
    },
});
