'use strict';


inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', 'form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code', 'form-input-phone-list__search');

function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) {
    let inputs = document.querySelectorAll(main);

    inputs.forEach(e => {
        let thisMainFlag = e.querySelector(mainFlag), 
            thisMainCode  = e.querySelector(mainCode),
            thisInput  = e.querySelector(input),
            thisList  = e.querySelector(list),
            thisSelects  = e.querySelectorAll(`.${selects}`),
            thisSearchInput = e.querySelector(`.${searchInput}`);

        thisInput.onblur = function (input) {
            if (!(input.relatedTarget != null && (input.relatedTarget.classList.contains(searchInput) || input.relatedTarget.classList.contains(selects)))) {
                thisList.classList.remove('active');                 
            }
        }

        e.onclick = function (event) {
            if (!event.target.classList.contains(searchInput)) {
                if (thisList.classList.contains('active')) {
                    thisList.classList.remove('active');
                }

                thisInput.focus();
                thisList.classList.add('active');
            }
        }

        thisSelects.forEach(e => {
            let newIcon = e.querySelector(selectIcon),
                newCode = e.querySelector(selectCode);

            e.onclick = function (event) {
                event.preventDefault();
                thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`;
                thisMainCode.textContent = newCode.textContent;
                

                setTimeout(() => {
                    thisList.classList.remove('active');
                }, 0);
            }
            
        })
    })
}

if (document.querySelector('.form-input-phone__input')) {
    checkPhone('.form-input-phone__input');
}

function checkPhone(input) {
    document.querySelector(input).addEventListener('input', function(event) {
        let text = event.target.value;
        let length = text.length;
        let newSymbol = event.data;

        if (!(/^\d+$/.test(text.replaceAll(' ', '')))) {
            event.target.value = text.slice(0, -1);
            return;
        }

        if (length == 4 || length == 8) {
            if (newSymbol != null) {
                event.target.value = text.slice(0, -1) + ' ' + newSymbol;
            }
        }
    })
}

inputTabs('.form-input__tabs', '.form-input-tabs__button');
inputTabs('.modal-map__control', '.modal-map-control__item');

function inputTabs(main, button, mandatory) {
    let mains = document.querySelectorAll(main);

    mains.forEach(main => {
        let buttons = main.querySelectorAll(button);

        buttons.forEach(button => {
            button.onclick = function () {
                if (button.classList.contains('active')) {
                    return ;
                }

                main.querySelector('.active').classList.remove('active');

                button.classList.add('active');
            }
        })
        
    })
}


inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input')

function inputRadio(main ,item, textClass, input) {
    let inputRadios = document.querySelectorAll(main);

    inputRadios.forEach(inputRadio => {
        let items = inputRadio.querySelectorAll(item),
            thisInput = inputRadio.querySelector(input);

        items.forEach(radio => {
            let thisText = radio.querySelector(textClass).textContent;

            radio.onclick = function (event) {
                event.preventDefault();

                if (inputRadio.querySelector(`${item}.active`)) {
                    inputRadio.querySelector(`${item}.active`).classList.remove('active');
                }
                thisInput.value = thisText;
                radio.classList.add('active');
            }
        })
    })
}

listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__input', '.form-input-list__content', '.form-input-list__block-content');

function listInputRadio(main ,item, textClass, input, content, block) {
    let listInputRadios = document.querySelectorAll(main);

    listInputRadios.forEach(listInputRadio => {
        let thisInput = listInputRadio.querySelector(input),
            items = listInputRadio.querySelectorAll(item),
            thisContent = listInputRadio.querySelector(content),
            thisBlock = listInputRadio.querySelector(block);

        thisInput.onclick = function () {
            thisBlock.classList.add('active');
            thisBlock.style.height = '192px';
        }


        thisInput.onblur = function(){
            thisBlock.classList.remove('active');
            thisBlock.style.height = '0px';
        };

        items.forEach(item => {
            item.onclick = function (event) {
                event.preventDefault();
                let newText = item.querySelector(textClass).textContent;

                thisInput.value = newText;
                
                if (thisContent.querySelector('.active')) {
                    thisContent.querySelector('.active').classList.remove('active');
                }

                item.classList.add('active');
            }
        })
    })
}

remoteControl('.form-input__remote-control', '.form-input-tabs__button');
remoteControl('.modal-map__control', '.modal-map-control__item');

function remoteControl(main, button) {
    let mains = document.querySelectorAll(main);

    mains.forEach(main => {
        let subjectClass = main.dataset.content,
            subject  = document.querySelector(`.${subjectClass}`),
            buttons = Array.from(main.querySelectorAll(button));

        main.addEventListener('click', function (eventMain) {
            setTimeout(() => {
                let indexActive = buttons.findIndex((button, index) => {
                    if (button.classList.contains('active')) {
                        return true;
                    }
                });
                if(subject.children[indexActive].classList.contains('active')){
                    return ;
                }
                
                subject.querySelector('.remote-control__item.active').classList.remove('active');
                subject.children[indexActive].classList.add('active');

                let mandatorys = subject.querySelectorAll('.mandatory');

                mandatorys.forEach(mandatory => {
                    if (mandatory.required) {
                        mandatory.required = false;
                    }else{
                        mandatory.required = true;
                    }
                })
            }, 0);
        })
    })
}

formCheck('.modal-form__content', 'input[type=submit]');
formCheck('.modal-map__form', 'input[type=submit]');

function formCheck(form, submit) {
    let forms = document.querySelectorAll(form);

    forms.forEach(form => {
        let thisSubmit = form.querySelector(submit);

        thisSubmit.onclick = function () {
            form.classList.add('check')
        }
        
    })
}

inputPhoneNoFlag('.no-flag');

function inputPhoneNoFlag(input){
    let inputs = document.querySelectorAll(input);

    inputs.forEach(input => {
        let code = '+' + input.dataset.code;
        
        input.onfocus = function () {
            if (input.value == '') {
                input.value = code;
            }
        }

        input.addEventListener('input', function(event) {
            let text = event.target.value;
            let length = text.length;
            let newSymbol = event.data;

            if (isNaN(event.data) || event.data == ' ') {
                event.target.value = text.slice(0, -1);
                return;
            }

            if (length == 3 || length == 7 || length == 11) {
                if (newSymbol != null) {
                    event.target.value = text.slice(0, -1) + ' ' + newSymbol;
                }
            }
            
        })
    })
}


inputCheck('.form-agreement__check');

function inputCheck(className) {
    let checks = document.querySelectorAll(className);

    checks.forEach(check => {
        let square = check.querySelector('.form-agreement__square'),
            input = check.querySelector('input');

        square.onclick = function () {
            input.click();   
        }
    })
}