// 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 ===================

// 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 ==========================

const s = (identifier) => {
    return document.querySelector(identifier);
};

export const sAll = (identifier) => {
    return document.querySelectorAll(identifier);
};

// BURGER ==========
const burgerBtn = s('.burger');
const burger = s('.burger-mobile');
const burgerInner = s('.burger-mobile-inner');

burger.addEventListener('click', (e) => {
    if (e.target.contains(burgerInner)) burger.classList.remove('active');
    document.body.style.overflow = 'visible';
});

burgerBtn.addEventListener('click', () => {
    burger.classList.toggle('active');
    if (burger.classList.contains('active'))
        document.body.style.overflow = 'hidden';
    else document.body.style.overflow = 'visible';
});

const burgerItem = sAll('.burger-item-title');
const burgerDrop = sAll('.burger-dropdown');

burgerItem.forEach((el, i) =>
    el.addEventListener('click', () => {
        burgerItem[i].classList.toggle('active');
        burgerDrop[i].classList.toggle('active');
    })
);

const burgerItemInner = sAll('.burger-item-title-inner');
const burgerDropInner = sAll('.burger-dropdown-inner');

burgerItemInner.forEach((el, i) =>
    el.addEventListener('click', () => {
        burgerItemInner[i].classList.toggle('active');
        burgerDropInner[i].classList.toggle('active');
    })
);

const burgerInner2 = sAll('.burger-item-title-inner-inner');
const burgerDropInner3 = sAll('.burger-dropdown-inner3');

burgerInner2.forEach((el, i) => {
    el.addEventListener('click', () => {
        burgerInner2[i].classList.toggle('active');
        burgerDropInner3[i].classList.toggle('active');
    });
});

// const toggler = s('.sign-toggler');

// toggler.addEventListener('click', () => {
//     burger.classList.remove('active');
//     loginFormSection.style.display = 'block';
// });

// BURGER SCRIPT 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');
const confirmBlock = document.querySelector('.login-form.confirm');

confirmBlock.addEventListener('click', () => {
    regForm.style.display = 'block';
    confirmBlock.style.display = 'block';
});

burgerSignIn.addEventListener('click', () => {
    burger.classList.remove('active');
    regForm.style.display = 'none';
    passRecNr.style.display = 'none';
    passRecSMS.style.display = 'none';
    loginFormSection.style.display = 'block';
    confirmBlock.style.display = 'none';
    document.body.style.overflowY = 'hidden';
});

burgerSignUp.addEventListener('click', () => {
    burger.classList.remove('active');
    regForm.style.display = 'block';
    passRecNr.style.display = 'none';
    passRecSMS.style.display = 'none';
    loginFormSection.style.display = 'block';
    loginForm.style.display = 'none';
    document.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';
        confirmBlock.style.display = 'none';
        loginForm.style.display = 'block';
        document.body.style.overflowY = 'auto';
    }
});

loginBtn.addEventListener('click', () => {
    confirmBlock.style.display = 'none';
    regForm.style.display = 'none';
    passRecNr.style.display = 'none';
    passRecSMS.style.display = 'none';
    loginFormSection.style.display = 'block';
    document.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';
        document.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 ==================================

// 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 numerator = (className) => {
    const items = document.querySelectorAll(`.${className}`);
    items.forEach((el, i) => {
        el.classList.add(`${className}-${i + 1}`);
        el.setAttribute('data-index', i + 1);
    });
};

numerator('cat-li');
numerator('cat-bg');
numerator('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');
    });
});

const revealImg = document.querySelector('.reveal');
const reveal = document.querySelector('.pas');
let revealed = false;

revealImg.addEventListener('click', () => {
    if (!revealed) {
        reveal.type = 'text';
        revealed = true;
    } else {
        reveal.type = 'password';
        revealed = false;
    }
});

const revealImg2 = document.querySelector('.reveal2');
const reveal2 = document.querySelectorAll('.pas2');
let revealed2 = false;

revealImg2.addEventListener('click', () => {
    if (!revealed2) {
        reveal2[0].type = 'text';
        reveal2[1].type = 'text';
        revealed2 = true;
    } else {
        reveal2[0].type = 'password';
        reveal2[1].type = 'password';
        revealed2 = false;
    }
});

const trigs = sAll('.lower-section-title-text');

trigs.forEach((trig) => {
    trig.addEventListener('click', () => {
        trigs.forEach((el) => el.classList.remove('active'));
        trig.classList.add('active');
    });
});

// Review popup start ============================

const popup = document.getElementById('review-popup');
const openReviewPopupBtn = document.getElementById('openReviewPopupBtn');
const closeReviewPopupBtn = document.getElementById('closeReviewPopupBtn');
const closeReviewPopupBtn2 = document.getElementById('closeReviewPopupBtn2');
const closeReviewPopupText = document.getElementById('closeReviewPopupText');

const openPopup = () => {
    popup.style.display = 'flex';
    document.body.classList.add('no-scroll');
};

const closePopup = () => {
    popup.style.display = 'none';
    document.body.classList.remove('no-scroll');
};

console.log('hello');

openReviewPopupBtn.addEventListener('click', openPopup);
closeReviewPopupText.addEventListener('click', closePopup);
closeReviewPopupBtn.addEventListener('click', closePopup);
closeReviewPopupBtn2.addEventListener('click', closePopup);

window.addEventListener('click', (event) => {
    if (event.target === popup) {
        popup.style.display = 'none';
        document.body.classList.remove('no-scroll');
    }
});

// Review popup end ============================
