import {ShoppingcartService} from "../../shop/components/shoppingcartService";

const ModalHandler = {

    modal: null,
    hasFixedPrice: false,
    hasRequiredAge: false,
    shoppingCartService: new ShoppingcartService(),

    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 productButtons = document.getElementsByClassName('js-open-modal-from-product');
        const productButtonsLength = productButtons.length;
        for (let p = 0; p < productButtonsLength; p++) {

            const productButton = productButtons[p];

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

        // 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 modalAddProductToShoppingCartButton = ModalHandler.modal.querySelector('.js-add-product-button');
        if(isset(modalAddProductToShoppingCartButton)) {
            modalAddProductToShoppingCartButton.removeEventListener('click', ModalHandler.addToShoppingCartEvent);
            modalAddProductToShoppingCartButton.addEventListener('click', ModalHandler.addToShoppingCartEvent);
        }

    },

    openModalFromProductEvent: function (event) {

        const productButton = event.currentTarget;

        const productId = productButton.getAttribute('data-product-id');
        const productType = productButton.getAttribute('data-product-type');
        const productName = productButton.getAttribute('data-product-name');
        const productPrice = productButton.getAttribute('data-product-price');
        const productImage = productButton.getAttribute('data-product-image');
        const productStep = productButton.getAttribute('data-product-step');

        ModalHandler.populateModal(productId, productType, productName, productPrice, productImage, productStep);
        ModalHandler.openModal();
    },

    populateModal: function (productId, productType, productName, productPrice, productImage, productStep) {

        const modalProductId = ModalHandler.modal.querySelector('.js-modal-product-id');
        const modalProductType = ModalHandler.modal.querySelector('.js-modal-product-type');
        const modalHeading = ModalHandler.modal.querySelector('.js-modal-heading');
        const modalPrice = ModalHandler.modal.querySelector('.js-modal-price');
        const modalImage = ModalHandler.modal.querySelector('.js-modal-image');
        const modalQuantity = ModalHandler.modal.querySelector('.js-modal-quantity');
        const modalStackLine = ModalHandler.modal.querySelector('.js-modal-stack');
        const modalStackLineAmount = ModalHandler.modal.querySelector('.js-modal-stack-amount');

        modalProductId.value = productId;
        modalProductType.value = productType;
        modalHeading.innerHTML = productName;
        modalPrice.innerHTML = productPrice;
        modalImage.src = productImage;

        const productStepInt = parseInt(productStep);

        // modalQuantity.min = productStepInt;
        // modalQuantity.value = productStepInt;
        // modalQuantity.step = productStepInt;

        modalQuantity.min = 1;
        modalQuantity.value = 1;
        modalQuantity.step = 1;

        if(productStepInt <= 1) {
            modalStackLine.hidden = true;
        }
        else {
            modalStackLine.hidden = false;
            modalStackLineAmount.innerHTML = productStepInt;
        }

    },

    openModal: function () {

        // Before showing the modal, set the right modal set
        ModalHandler.setModalAreas(false);

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

        const addToShoppingCartButton = ModalHandler.modal.querySelector('.js-modal-quantity');
        addToShoppingCartButton.addEventListener('change', ModalHandler.modalQuantityChanged);
    },

    setModalAreas: function(showContinue = true)
    {

        const modalContinueChoices = ModalHandler.modal.querySelector('.js-modal-continue-choices');
        const modalAddToCart = ModalHandler.modal.querySelector('.js-modal-add-to-cart');

        // NOTE: because it is the hidden value, we need to flip it
        modalContinueChoices.hidden = !showContinue;
        modalAddToCart.hidden = showContinue;
    },

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

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

        const addToShoppingCartButton = ModalHandler.modal.querySelector('.js-modal-quantity');
        addToShoppingCartButton.removeEventListener('change', ModalHandler.modalQuantityChanged);
    },

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

    addToShoppingCartEvent: function(event) {
        ModalHandler.addToShoppingCart();
    },

    addToShoppingCart: function () {

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

        const quantityInput = ModalHandler.modal.querySelector('.js-modal-quantity');

        ModalHandler.shoppingCartService.validateProductQuantityInput(quantityInput);

        if(isset(productId) && isset(productType) && isset(quantityInput)) {
            ModalHandler.shoppingCartService._addProductToShoppingcart(productId, productType, parseInt(quantityInput.value), false);
            ModalHandler.setModalAreas(true);
        }
        else console.warn('ModalHandler: Some of the required variables is missing');
    },

    /**
     * Input quantity changed.
     * This will be triggered when the input field has been changed.
     *
     * @param event
     */
    modalQuantityChanged: function(event) {

        const input = event.currentTarget;
        ModalHandler.shoppingCartService.validateProductQuantityInput(input);
    },

    handleKeyPressed: function (event) {

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

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

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

    },

};

ModalHandler.init();