import { DatePickerHandler } from './datePickerHandler';

const ModalHandler = {

    modal: null,
    hasFixedPrice: false,
    hasRequiredAge: false,

    init: function () {

        ModalHandler.modal = document.querySelector('.js-modal');

        // If modal isn't set, we stop the init
        if (!isset(ModalHandler.modal)) return;

        // Add (and remove previous) events for opening the modal based upon a postal
        const posterButtons = document.getElementsByClassName('js-open-modal-from-postal');
        const posterButtonsLength = posterButtons.length;
        for (let p = 0; p < posterButtonsLength; p++) {

            const posterButton = posterButtons[p];

            // Remove all the previous event on the posters
            posterButton.removeEventListener('click', ModalHandler.openModalFromPostalEvent);
            posterButton.addEventListener('click', ModalHandler.openModalFromPostalEvent);
        }

        // Add (and remove previous) events for closing or submitting the modal
        const modalCloseElements = ModalHandler.modal.querySelectorAll('.js-modal-close');
        const modalCloseElementLength = modalCloseElements.length;
        for (let c = 0; c < modalCloseElementLength; c++) {

            const modalCloseElement = modalCloseElements[c];

            modalCloseElement.removeEventListener('click', ModalHandler.closeModalEvent);
            modalCloseElement.addEventListener('click', ModalHandler.closeModalEvent);
        }

        const modalSubmitButton = ModalHandler.modal.querySelector('.js-modal-submit');
        if(isset(modalSubmitButton)) {
            modalSubmitButton.removeEventListener('click', ModalHandler.submitModalEvent);
            modalSubmitButton.addEventListener('click', ModalHandler.submitModalEvent);
        }

        if(ModalHandler.modal.classList.contains('fill-from-inputs')) {
            ModalHandler.fillFromInputs();
        }

    },


    openModalFromPostalEvent: function (event) {

        const posterButton = event.currentTarget;
        ModalHandler.populateModalFromPostalButton(posterButton);
        ModalHandler.openModal();
    },

    populateModalFromPostalButton(posterButton) {
        const productId = posterButton.getAttribute('data-modal-product-id');
        const locationId = posterButton.getAttribute('data-modal-location-id');
        const heading = posterButton.getAttribute('data-modal-heading');
        const location = posterButton.getAttribute('data-modal-location');

        const daysOfThWeekClosed = posterButton.getAttribute('data-modal-day-of-the-week-closed');

        const notification = posterButton.getAttribute('data-modal-notification');
        const minPersons = posterButton.getAttribute('data-modal-min-persons');
        const maxPersons = posterButton.getAttribute('data-modal-max-persons');
        const requiredAge = posterButton.getAttribute('data-modal-required-age');

        // We store this on the ModalHandler, because we also need possible delete it before sending the submit
        ModalHandler.hasFixedPrice = posterButton.getAttribute('data-modal-has-fixed-price');

        ModalHandler.populateModal(productId, locationId, heading, location, daysOfThWeekClosed, notification, minPersons, maxPersons, requiredAge);
    },

    populateModal: function (productId, locationId, heading, location, daysOfThWeekClosed, notification, minPersons, maxPersons, requiredAge) {

        const modalProductId = ModalHandler.modal.querySelector('.js-modal-product-id');
        const modalLocationId = ModalHandler.modal.querySelector('.js-modal-location-id');
        const modalHeading = ModalHandler.modal.querySelector('.js-modal-heading');
        const modalLocation = ModalHandler.modal.querySelector('.js-modal-location');

        const modalAgeConfirm = ModalHandler.modal.querySelector('.js-modal-confirm-age');
        const modalAgeConfirmAmount = ModalHandler.modal.querySelector('.js-confirm-age-amount');

        const modalAmountOfPersons = ModalHandler.modal.querySelector('.js-modal-amount-of-persons');
        const modalAmountOfPersonsInput = ModalHandler.modal.querySelector('.js-modal-amount-of-persons-input');

        const modalNotification = ModalHandler.modal.querySelector('.js-modal-notification');
        const modalNotificationMessage = ModalHandler.modal.querySelector('.js-modal-notification-message');

        const modalDatePicker = ModalHandler.modal.querySelector('.js-date-picker');
        modalDatePicker.setAttribute('data-days-of-the-week-closed', daysOfThWeekClosed);

        const modalDatePickerFp = modalDatePicker._flatpickr;
        if(isset(modalDatePickerFp)) {
            modalDatePickerFp.destroy();
            modalDatePicker.value = modalDatePicker.getAttribute('value');
            DatePickerHandler.makeFlatPickr(modalDatePicker);
        }

        modalProductId.value = productId;
        modalLocationId.value = locationId;
        modalHeading.innerHTML = heading;
        modalLocation.innerHTML = location;

        // Hide or show the required age checkbox
        if (!isset(requiredAge) || requiredAge == 0) {
            modalAgeConfirm.hidden = true;
            ModalHandler.hasRequiredAge = false;
        } else {
            modalAgeConfirm.hidden = false;
            ModalHandler.hasRequiredAge = true;
            modalAgeConfirmAmount.innerHTML = requiredAge;
        }


        // Set the amount of persons to the min value
        modalAmountOfPersonsInput.min = minPersons;
        modalAmountOfPersonsInput.max = maxPersons;
        modalAmountOfPersonsInput.value = minPersons;

        const minAmountErrorMessage = ModalHandler.modal.querySelector('.js-min-amount');
        minAmountErrorMessage.innerHTML = minPersons;

        const maxAmountErrorMessage = ModalHandler.modal.querySelector('.js-max-amount');
        maxAmountErrorMessage.innerHTML = maxPersons;

        // // Hide or show the amount of persons input
        // if (isset(ModalHandler.hasFixedPrice) && ModalHandler.hasFixedPrice == 1) {
        //     // debugger;
        //     modalAmountOfPersons.hidden = true;
        //     modalAmountOfPersonsInput.min = 1;
        // }
        // else {
        //     // debugger;
        //     modalAmountOfPersons.hidden = false;
        //     modalAmountOfPersonsInput.min = minPersons;
        //     modalAmountOfPersonsInput.value = minPersons;
        //
        //     const minAmountErrorMessage = ModalHandler.modal.querySelector('.js-min-amount');
        //     minAmountErrorMessage.innerHTML = minPersons;
        // }

        // Hide or show the notification
        if (isset(notification) && notification !== '') {
            modalNotification.hidden = false;
            modalNotificationMessage.innerHTML = notification;
        } else {
            modalNotification.hidden = true;
            modalNotificationMessage.innerHTML = '';
        }
    },

    fillFromInputs: function() {

        ModalHandler.modal.classList.remove('fill-from-inputs');

        const productId = ModalHandler.modal.querySelector('.js-modal-product-id').value;
        const locationId = ModalHandler.modal.querySelector('.js-modal-location-id').value;

        // Grab the right poster button from the dom
        const posterButton = document.querySelector('.js-open-modal-from-postal[data-modal-product-id="' + productId + '"][data-modal-location-id="' + locationId + '"]');

        // Continue flow as normal
        ModalHandler.populateModalFromPostalButton(posterButton);
        ModalHandler.openModal();
    },

    clearModal: function () {

        const modalMessage = ModalHandler.modal.querySelector('.js-modal-message');
        const modalAmountOfPersonsInput = ModalHandler.modal.querySelector('.js-modal-amount-of-persons-input');
        const modalConfirmAgeCheckbox = ModalHandler.modal.querySelector('.js-confirm-age-checkbox');
        const modalConfirmAgeErrorMessage = ModalHandler.modal.querySelector('.js-modal-confirm-age-error');
        const modalAmountOfPersonsLabel = ModalHandler.modal.querySelector('.js-modal-amount-of-persons-label');
        const modalConfirmAmountOfPersonsErrorMinMessage = ModalHandler.modal.querySelector('.js-modal-confirm-amount-of-persons-min-warning');
        const modalConfirmAmountOfPersonsErrorMaxMessage = ModalHandler.modal.querySelector('.js-modal-confirm-amount-of-persons-max-warning');

        modalMessage.value = '';
        modalAmountOfPersonsInput.value = '';
        modalAmountOfPersonsInput.min = 1;
        modalConfirmAgeCheckbox.checked = false;

        modalConfirmAgeErrorMessage.hidden = true;
        modalConfirmAmountOfPersonsErrorMaxMessage.hidden = true;
        modalConfirmAmountOfPersonsErrorMinMessage.hidden = true;
        modalAmountOfPersonsLabel.classList.remove('has-error--negative');

        // Remove the error flash message
        const modalNotes = ModalHandler.modal.querySelector('.js-modal-notes');
        if(isset(modalNotes)) modalNotes.remove();

    },

    openModal: function () {
        ModalHandler.modal.hidden = false;
        ModalHandler.modal.classList.add('is-modal-visible');
        window.addEventListener('keydown', ModalHandler.handleKeyPressed);
    },

    closeModalEvent: function (event) {
        ModalHandler.closeModal();
    },

    closeModal: function () {
        ModalHandler.modal.hidden = true;
        ModalHandler.modal.classList.remove('is-modal-visible');
        ModalHandler.clearModal();
        window.removeEventListener('keydown', ModalHandler.handleKeyPressed);
    },

    submitModalEvent: function (event) {
        ModalHandler.submitModal();
    },

    submitModal: function() {

        const modalConfirmAgeErrorMessage = ModalHandler.modal.querySelector('.js-modal-confirm-age-error');
        const modalConfirmAmountOfPersonsErrorMessage = ModalHandler.modal.querySelector('.js-modal-confirm-amount-of-persons-error');
        const modalConfirmAmountOfPersonsErrorMinMessage = ModalHandler.modal.querySelector('.js-modal-confirm-amount-of-persons-min-warning');
        const modalConfirmAmountOfPersonsErrorMaxMessage = ModalHandler.modal.querySelector('.js-modal-confirm-amount-of-persons-max-warning');
        const modalConfirmAgeCheckbox = ModalHandler.modal.querySelector('.js-confirm-age-checkbox');
        const modalAmountOfPersonsInput = ModalHandler.modal.querySelector('.js-modal-amount-of-persons-input');
        const modalAmountOfPersonsLabel = ModalHandler.modal.querySelector('.js-modal-amount-of-persons-label');

        // Set to default
        let shouldSubmit = true;
        modalConfirmAgeErrorMessage.hidden = true;
        modalConfirmAmountOfPersonsErrorMessage.hidden = true;
        modalConfirmAmountOfPersonsErrorMinMessage.hidden = true;
        modalConfirmAmountOfPersonsErrorMaxMessage.hidden = true;
        modalAmountOfPersonsLabel.classList.remove('has-error--negative');

        if(isset(ModalHandler.hasRequiredAge) && ModalHandler.hasRequiredAge === true) {
            if(modalConfirmAgeCheckbox.checked === false){
                modalConfirmAgeErrorMessage.hidden = false;
                console.warn('Modal validation: The checkbox has not been checked.');
                shouldSubmit = false;
            }
        }

        const amountOfPersons = parseInt(modalAmountOfPersonsInput.value);
        const minAmountOfPersons = parseInt(modalAmountOfPersonsInput.min);
        const maxAmountOfPersons = parseInt(modalAmountOfPersonsInput.max);

        if(isNaN(amountOfPersons) || amountOfPersons === 0) {
            modalAmountOfPersonsLabel.classList.add('has-error--negative');
            modalConfirmAmountOfPersonsErrorMessage.hidden = false;

            console.warn('Modal validation: The amount of persons has not been set.');
            shouldSubmit = false;
        }
        else if(amountOfPersons > maxAmountOfPersons) {
            modalAmountOfPersonsLabel.classList.add('has-error--negative');
            modalConfirmAmountOfPersonsErrorMaxMessage.hidden = false;

            console.warn('Modal validation: The amount of persons is too large.');
            shouldSubmit = false;
        }
        else if(amountOfPersons < minAmountOfPersons) {
            modalAmountOfPersonsLabel.classList.add('has-error--negative');
            modalConfirmAmountOfPersonsErrorMinMessage.hidden = false;

            console.warn('Modal validation: The amount of persons is too less.');
            shouldSubmit = false;
        }

        if(shouldSubmit) {
            const modalForm = ModalHandler.modal.querySelector('.js-modal-form');
            modalForm.submit();
        }
        else{
            console.warn('Modal validation: Failed.');
        }
    },

    handleKeyPressed: function (event) {

        switch (event.key) {
            case 'Escape':
                return ModalHandler.closeModal();

            case 'Enter':
                return ModalHandler.submitModal();

            default:
                // console.log(event);
        }

    },

};

ModalHandler.init();