import './bootstrap';
import $ from 'jquery';
import select2 from 'select2/dist/js/select2.full.js';
import 'select2/dist/css/select2.css';
import flatpickr from 'flatpickr';
import 'flatpickr/dist/flatpickr.css';

window.$ = $;
window.jQuery = $;

select2(window, $);

function livewireComponentFor(element) {
    const componentRoot = element.closest('[wire\\:id]');

    if (!componentRoot || ! window.Livewire) {
        return null;
    }

    return window.Livewire.find(componentRoot.getAttribute('wire:id'));
}

function setLivewireProperty(element, model, value) {
    const component = livewireComponentFor(element);

    if (!component || !model) {
        return;
    }

    component.set(model, value === '' ? null : value);
}

function initialiseHelpdeskSelects() {
    $('[data-helpdesk-select2]').each(function () {
        const select = this;
        const $select = $(select);
        const placeholder = $select.data('placeholder') || $select.find('option[value=""]').first().text() || 'Select option';

        if ($select.hasClass('select2-hidden-accessible')) {
            return;
        }

        if (!$select.find('option[value=""]').length) {
            $select.prepend(new Option('', '', false, false));
        }

        $select.select2({
            width: '100%',
            allowClear: true,
            placeholder,
        });

        $select.on('change.helpdesk-select2', function () {
            setLivewireProperty(select, $select.data('wire-model'), $select.val());
        });
    });
}

function clearHelpdeskSelects(root = document) {
    $(root).find('[data-helpdesk-select2]').each(function () {
        const $select = $(this);

        $select.val(null);
        $select.trigger('change.select2');
        $select.trigger('change.helpdesk-select2');
        $select.trigger('change');
    });
}

function initialiseHelpdeskDatePickers() {
    document.querySelectorAll('[data-helpdesk-flatpickr]').forEach((input) => {
        if (input._helpdeskFlatpickr) {
            return;
        }

        input._helpdeskFlatpickr = flatpickr(input, {
            allowInput: true,
            altInput: true,
            altFormat: 'd M Y',
            dateFormat: 'Y-m-d',
            disableMobile: false,
            onChange: (_selectedDates, dateText) => {
                setLivewireProperty(input, input.dataset.wireModel, dateText || null);
            },
            onClose: (_selectedDates, dateText) => {
                setLivewireProperty(input, input.dataset.wireModel, dateText || null);
            },
        });
    });
}

function clearHelpdeskDatePickers(root = document) {
    root.querySelectorAll('[data-helpdesk-flatpickr]').forEach((input) => {
        if (input._helpdeskFlatpickr) {
            input._helpdeskFlatpickr.clear();
        }

        input.value = '';
        setLivewireProperty(input, input.dataset.wireModel, null);
    });
}

function initialiseHelpdeskFormControls() {
    initialiseHelpdeskSelects();
    initialiseHelpdeskDatePickers();
}

function clearHelpdeskFormControls() {
    clearHelpdeskSelects();
    clearHelpdeskDatePickers();
}

window.initialiseHelpdeskFormControls = initialiseHelpdeskFormControls;
window.clearHelpdeskFormControls = clearHelpdeskFormControls;

document.addEventListener('DOMContentLoaded', initialiseHelpdeskFormControls);
document.addEventListener('livewire:navigated', initialiseHelpdeskFormControls);
document.addEventListener('helpdesk-form-cleared', clearHelpdeskFormControls);

document.addEventListener('livewire:init', () => {
    initialiseHelpdeskFormControls();

    Livewire.hook('morphed', () => {
        initialiseHelpdeskFormControls();
    });

    Livewire.on('helpdesk-form-cleared', () => {
        clearHelpdeskFormControls();
    });
});

console.info('Helpdesk module assets loaded');