import { isset } from "../global/helpers";

/* ==========================================================================
    Input handler

    This handler can be remove when the css support for :focus-within is better
 ========================================================================== */

const InputHandler = {

    inputFields: [],
    selectFields: [],
    fields: [],

    init : function()
    {
        // Get the form inputs
        // InputHandler.inputFields = document.querySelectorAll('form input, form textarea');
        // InputHandler.selectFields = document.querySelectorAll('form select');
        InputHandler.fields = document.querySelectorAll('form input, form textarea, form select');

        const fieldsLength = InputHandler.fields.length;
        for(let i = 0; i < fieldsLength; i++){

            const field = InputHandler.fields[i];
            const fieldId = field.getAttribute('id');
            let fieldType = field.tagName
            fieldType = fieldType.toLowerCase();

            let depth = 0;
            if(fieldType === 'select') depth = 1;

            // Check if there is an id on the input
            if(isset(fieldId)){

                const fieldLabel = document.querySelector('form label[for="'+fieldId+'"]');

                // // And if there is a belonging label
                if(isset(fieldLabel)){
                    InputHandler.addEventListenersToInput(field, depth);
                }
            }
        }
    },

    addEventListenersToInput : function(field, additionalNesting = 0)
    {
        // Add the fill class and trigger removeFocus so the input will be automatic be marked as filled or not
        let parentElement = field.parentNode;

        for(let ad = 0; ad < additionalNesting; ad++)
        {
            parentElement = parentElement.parentNode;
        }

        parentElement.classList.add('filled');
        InputHandler.removeFocus(field, additionalNesting);

        field.addEventListener('focus', function () {

            // We loop through the input elements because autocomplete (on chrome) triggers al the focus elements but none focus out
            const fieldsLength = InputHandler.fields.length;
            for(let i = 0; i < fieldsLength; i++){
                const loopedField = InputHandler.fields[i];

                // Trigger add focus on this focused element
                if(loopedField === field){
                    InputHandler.addFocus(this, additionalNesting);
                }
                // Remove focus on all other fields
                else{
                    InputHandler.removeFocus(loopedField);
                }
            }

        });

        field.addEventListener('focusout', function () {
            InputHandler.removeFocus(this, additionalNesting);
        });

    },

    addFocus : function (field, additionalNesting = 0) {
        if(isset(field)) {

            const fieldId = field.getAttribute('id');

            let parentElement = field.parentNode;

            for(let ad = 0; ad < additionalNesting; ad++)
            {
                parentElement = parentElement.parentNode;
            }

            parentElement.classList.add('focused');
            parentElement.classList.add('filled');

            // If there is a error message remove it on focus
            const errorMessage = document.querySelector('form .error-message#' + fieldId + '-error');
            if (isset(errorMessage)) {
                errorMessage.classList.add('fade-out');
            }
        }

    },

    // Reset the label location only if the input is empty
    removeFocus : function (field, additionalNesting = 0) {
        if(isset(field)){

            const fieldValue = field.value;

            let parentElement = field.parentNode;

            for(let ad = 0; ad < additionalNesting; ad++)
            {
                parentElement = parentElement.parentNode;
            }

            parentElement.classList.remove('focused');

            if(!isset(fieldValue) || fieldValue === ''){
                parentElement.classList.remove('filled');
            }
        }
    },

};

export default InputHandler