// DESKTOP LANGUAGE SELECT ===================
let langList = document.querySelector('.language-list');
let langBlock = document.querySelector('.language-select');

langBlock.addEventListener('mouseover', function () {
    langList.classList.remove('hidden');
});
langBlock.addEventListener('mouseout', function () {
    langList.classList.add('hidden');
});
// DESKTOP LANGUAGE SELECT end ===================

// CHECKBOXES ===============
const aft = document.querySelectorAll('.item-section-filter-element');
const check = document.querySelectorAll('.checkbox_1');
for (let i = 0; i < check.length; i++) {
    check[i].addEventListener('change', () => {
        aft.forEach((el) => {
            el.classList.remove('showed');
        });
        if (check[i].checked) {
            aft[i].classList.add('showed');
        } else {
            aft[i].classList.remove('showed');
        }
    });
}

const aft2 = document.querySelectorAll('.item-section-filter-element2');
const check2 = document.querySelectorAll('.checkbox_2');
for (let i = 0; i < check2.length; i++) {
    check2[i].addEventListener('change', () => {
        aft2.forEach((el) => {
            el.classList.remove('reveal');
        });
        if (check2[i].checked) {
            aft2[i].classList.add('reveal');
        } else {
            aft2[i].classList.remove('reveal');
        }
    });
}
// CHECKBOXES end===============

// ACCORDION SCRIPT ========================== //
let accordionTrigger = document.querySelectorAll('.footer-title-wrapper');
let accordionElement = document.querySelectorAll('.footer-content');

for (let i = 0; i < accordionTrigger.length; i++) {
    accordionTrigger[i].addEventListener('click', function () {
        accordionTrigger.forEach(function (item) {
            if (item !== accordionTrigger[i]) {
                item.classList.remove('active');
            }
        });
        accordionElement.forEach(function (el) {
            if (el !== accordionElement[i]) {
                el.classList.remove('visible');
            }
        });
        accordionTrigger[i].classList.toggle('active');
        accordionElement[i].classList.toggle('visible');
    });
}

// ACCORDION SCRIPT end ==========================

// BURGER SCRIPT ===============================
let burgerTrigger = document.querySelector('.burger');
let burgerElement = document.querySelector('.nav-inner-burger-container');
let body = document.querySelector('body');

burgerTrigger.addEventListener('click', function () {
    burgerElement.classList.remove('hidden-burger');
    body.style.overflow = 'hidden';
});

let burgerTriggerClose = document.querySelector('.burger-close');

burgerTriggerClose.addEventListener('click', function () {
    burgerElement.classList.add('hidden-burger');
    body.style.overflow = 'auto';
});

// BURGER LANGUAGE ================================
let langTrig = document.querySelector('.language-trig');
langTrig.addEventListener('click', () => {
    langTrig.classList.toggle('triggered');
    currencyTrig.classList.remove('triggered');
});
let currencyTrig = document.querySelector('.price-view');
currencyTrig.addEventListener('click', () => {
    langTrig.classList.remove('triggered');
    currencyTrig.classList.toggle('triggered');
});
// BURGER LANGUAGE end ===========================
// BURGER SCRIPT end ===============================

let addrCount;

// CHECKBOX ========================================

function indexer(
    elClassName,
    addedElClassName,
    triggerClassName,
    addedTriggerClassName,
    startNumber
) {
    let counter = startNumber;
    let obj = document.querySelectorAll(`.${elClassName}`);
    obj.forEach((el) => {
        el.classList.add(`${addedElClassName}-${counter}`);
        counter++;
    });
    counter = startNumber;
    let trig = document.querySelectorAll(`.${triggerClassName}`);
    trig.forEach((el) => {
        el.classList.add(`${addedTriggerClassName}-${counter}`);
        counter++;
    });
    addrCount = counter;
}

// ADDRESS NUMERATOR ===============================
let addrNr = document.querySelectorAll('.address-nr');
counter = 1;
addrNr.forEach((el) => {
    el.innerText = counter;
    counter++;
});
// ADDRESS NUMERATOR end ===========================

// LOGIN/SIGNUP ======================================
let loginBtn = document.querySelector('.logged-false');
let loginFormSection = document.querySelector('.sign-up');
let loginForm = document.querySelector('.login-form');
let regBtn = document.querySelector('.sign-up-btn');
let regForm = document.querySelector('.registration-form');
let loginCloseBtn = document.querySelectorAll('.sign-up-exit-img');
let loginBtnReturnLink = document.querySelector('.sign-up-btn-return');
let forgottenPass = document.querySelector('.forgot-pass');
let passRecNr = document.querySelector('.password-recovery-nr');
let passRecSMS = document.querySelector('.password-recovery-sms');
let smsTrig = document.querySelector('.sms-trigger');
let signUpWrapper = document.querySelector('.sign-up-wrapper');
let signUpContainer = document.querySelector('.sign-up-container');
let burgerSignIn = document.querySelector('.burger-sign-in');
let burgerSignUp = document.querySelector('.burger-sign-up');

burgerSignIn.addEventListener('click', () => {
    burgerElement.classList.add('hidden-burger');
    regForm.style.display = 'none';
    passRecNr.style.display = 'none';
    passRecSMS.style.display = 'none';
    loginFormSection.style.display = 'block';
    body.style.overflowY = 'hidden';
});

burgerSignUp.addEventListener('click', () => {
    burgerElement.classList.add('hidden-burger');
    regForm.style.display = 'block';
    passRecNr.style.display = 'none';
    passRecSMS.style.display = 'none';
    loginFormSection.style.display = 'block';
    loginForm.style.display = 'none';
    body.style.overflowY = 'hidden';
});

signUpContainer.addEventListener('click', (event) => {
    let isClickInsideElement = signUpWrapper.contains(event.target);
    if (!isClickInsideElement) {
        loginFormSection.style.display = 'none';
        regForm.style.display = 'none';
        passRecNr.style.display = 'none';
        passRecSMS.style.display = 'none';
        loginForm.style.display = 'block';
        body.style.overflowY = 'auto';
    }
});

loginBtn.addEventListener('click', () => {
    regForm.style.display = 'none';
    passRecNr.style.display = 'none';
    passRecSMS.style.display = 'none';
    loginFormSection.style.display = 'block';
    body.style.overflowY = 'hidden';
});

loginCloseBtn.forEach((el) => {
    el.addEventListener('click', () => {
        loginFormSection.style.display = 'none';
        regForm.style.display = 'none';
        passRecNr.style.display = 'none';
        passRecSMS.style.display = 'none';
        loginForm.style.display = 'block';
        body.style.overflowY = 'auto';
    });
});

regBtn.addEventListener('click', (event) => {
    regForm.style.display = 'block';
    loginForm.style.display = 'none';
});
loginBtnReturnLink.addEventListener('click', () => {
    regForm.style.display = 'none';
    loginForm.style.display = 'block';
});

forgottenPass.addEventListener('click', () => {
    passRecNr.style.display = 'block';
    loginForm.style.display = 'none';
});
smsTrig.addEventListener('click', () => {
    passRecNr.style.display = 'none';
    passRecSMS.style.display = 'block';
});
// LOGIN/SIGNUP end ==================================
// ADDRESS NUMERATOR ===============================
let adrCounter;
function addNum(elClass) {
    let addrNr = document.querySelectorAll(`.${elClass}`);
    counter = 1;
    addrNr.forEach((el) => {
        el.innerText = counter;
        adrCounter = counter;
        counter++;
    });
}
addNum('address-nr');

// ADDRESS NUMERATOR end ===========================

function elementCreator(elName, elClass) {
    let object = document.createElement(elName);
    object.classList.add(elClass);
    return object;
}

// ADD ADDRESS ======================================
let addBtn = document.querySelector('.content-link');
let addBlock = document.querySelector(
    '.profile-content-inner-mid-block-wrapper-hidden'
);
let parent = document.querySelector('.delivery-content-mid-left-blocks');
let btnParent = document.querySelector('.profile-content-inner-bottom-second');
let saveBtn = elementCreator('button', 'save-button');
let inputArea = document.querySelectorAll('.fetch-input');
let wholeLine = '';
addBtn.addEventListener('click', () => {
    addBlock.classList.add('shown');
    // addBtn.style.display = "none";
    // addBtn.style.height = "0px"
    parent.removeChild(addBtn);
    btnParent.appendChild(saveBtn);
    // parent.style.gridTemplateColumns = "1fr 1fr";
    saveBtn.innerText = 'Добавить';
    saveBtn.classList.add('checkout-button');
    saveBtn.classList.add('saveable');
    addrCount++;
});

saveBtn.addEventListener('click', () => {
    wholeLine = '';
    if (saveBtn.classList.contains('saveable')) {
        for (let i = 0; i < inputArea.length; i++) {
            wholeLine = wholeLine + ' ' + inputArea[i].value;
        }
        let block = elementCreator('label', 'content-block');
        block.classList.add('option');
        let innerWrpr1 = elementCreator('div', 'content-block-title-wrapper');
        let innerWrpr2 = elementCreator('div', 'content-block-main-wrapper');
        let inText = elementCreator('h4', 'content-block-wrapper-text');
        let innerSpan = elementCreator('span', 'address-nr');
        let innerTextArea = elementCreator(
            'textarea',
            'content-block-main-wrapper-text'
        );
        let checkboxWrpr = elementCreator('div', 'option-checkbox-wrapper');
        let checkboxEl = elementCreator('input', 'option-checkbox');
        checkboxEl.type = 'radio';
        checkboxEl.name = 'addr-btn';
        checkboxWrpr.appendChild(checkboxEl);

        innerTextArea.innerText = wholeLine;
        inText.innerText = 'Адрес №';
        inText.appendChild(innerSpan);
        innerWrpr1.appendChild(inText);
        innerWrpr1.appendChild(checkboxWrpr);
        innerWrpr2.appendChild(innerTextArea);
        block.appendChild(innerWrpr1);
        block.appendChild(innerWrpr2);
        parent.appendChild(block);
        parent.style.gap = '2rem';
        // parent.removeChild(addBtn);
        parent.appendChild(addBtn);
        saveBtn.classList.remove('saveable');
        btnParent.removeChild(saveBtn);
        addNum('address-nr');
        textAreaFunctions();
        inputArea.forEach((el) => {
            el.value = '';
        });
        addrCount++;
    }
});
saveBtn.addEventListener('click', () => {
    if (!saveBtn.classList.contains('saveable')) {
        addBlock.classList.remove('shown');
    }
    indexer('option-checkbox', 'option-checkbox', 'option', 'option', 1);
    trig = document.querySelectorAll('.option');
    obj = document.querySelectorAll('.option-checkbox');
    for (let i = 0; i < document.querySelectorAll('.option').length; i++) {
        trig[i].addEventListener('click', () => {
            trig.forEach((el) => {
                el.classList.remove('option-checked');
            });
            obj.forEach((el) => {
                el.classList.remove('option-checkbox-checked');
            });

            trig[i].classList.add('option-checked');
            obj[i].classList.add('option-checkbox-checked');
        });
    }
    if (addrCount >= 6) {
        parent.removeChild(addBtn);
    }
});

// ADD ADDRESS end ==================================

// TEXTAREA AUTO-RESIZE =============================
function textAreaFunctions() {
    let textarea = document.querySelectorAll(
        '.content-block-main-wrapper-text'
    );
    let textBlock = document.querySelectorAll('.content-block');

    textarea.forEach((el) => {
        // el.addEventListener('click', autoResize, false);
        el.addEventListener('input', autoResize, false);
        el.addEventListener('click', () => {
            for (let i = 0; i < textarea.length; i++) {
                if (textarea[i] === el) {
                    textBlock[i].classList.add('current-input');
                }
            }
        });
        textBlock.forEach((el) => {
            el.addEventListener('focusout', () => {
                el.classList.remove('current-input');
            });
        });
    });
}

function autoResize() {
    let textBlock = document.querySelectorAll('.content-block');
    this.style.height = 'auto';
    height = this.scrollHeight;
    this.style.height = height + 'px';
    textBlock.forEach((el) => {
        el.style.height = toString(parseInt(height) + 20) + 'px';
    });
}
textAreaFunctions();
// TEXTAREA AUTO-RESIZE end =========================

// CAT DROPDOWN

const catParent = document.querySelector('.service-li.active');
const cat = document.querySelector('.cat-dropdown');

const lis = document.querySelectorAll('.cat-li');
const catBlock = document.querySelectorAll('.cat-data-block');

const numerator1 = (className) => {
    const items = document.querySelectorAll(`.${className}`);
    items.forEach((el, i) => {
        el.classList.add(`${className}-${i + 1}`);
        el.setAttribute('data-index', i + 1);
    });
};

numerator1('cat-li');
numerator1('cat-bg');
numerator1('cat-data-block');

let checker = true;
let last;

catBlock.forEach((el) => {
    const imgPath = el.getAttribute('data-img');
    el.style.background = `linear-gradient(
        to right,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0.4)
    ),
    url(${imgPath}), center, no-repeat`;
    el.style.backgroundSize = 'cover';
});

catParent.addEventListener('click', () => {
    cat.classList.toggle('active');
    if (checker) {
        catBlock[0].classList.toggle('active');
        lis[0].classList.toggle('active');
        checker = false;
    } else {
        if (last) {
            catBlock[last].classList.toggle('active');
            lis[last].classList.toggle('active');
        } else {
            catBlock[0].classList.toggle('active');
            lis[0].classList.toggle('active');
        }
    }
});

lis.forEach((el) => {
    el.addEventListener('click', () => {
        last = el.getAttribute('data-index') - 1;
        catBlock.forEach((el) => {
            el.classList.remove('active');
        });
        catBlock[last].classList.add('active');
        lis.forEach((el) => {
            el.classList.remove('active');
        });
        el.classList.add('active');
    });
});
