'use strict';

import * as fun from './_gp-function.js';

let widthPhoneCabinet = 1200;

fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail');



startHeight('.cabinet__orders', '.cabinet', widthPhoneCabinet, '.cabinet__profile', '.cabinet-control__button');
controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet);

window.addEventListener('resize', (e) => {
    startHeight('.cabinet__orders', '.cabinet', widthPhoneCabinet, '.cabinet__profile', '.cabinet-control__button');
});


// function
function startHeight(heightElement, contentElement, minWidth, removeActive, buttons) {
    let thisWidth = window.innerWidth;
    let thisHeightElement = document.querySelector(heightElement);
    let thisContentElement = document.querySelector(contentElement);
    let thisRemoveActive = document.querySelector(removeActive);
    let thisButtons = document.querySelectorAll(buttons);

    if (thisWidth <= minWidth) {
        let newHeight =  thisHeightElement.clientHeight + 48;
        
        thisContentElement.style.height = `${newHeight}px`;
        thisHeightElement.classList.add('active');
        thisRemoveActive.classList.remove('active');

        thisButtons.forEach(e => {
            let thisClassList = e.classList;

            if (!thisClassList.contains('start')) {
                thisClassList.remove('active');                
            }else{
                thisClassList.add('active')
            }
        })
    }else{
        thisContentElement.style.height = 'auto';
        thisHeightElement.classList.remove('active');

        thisButtons.forEach(e => {
            let thisClassList = e.classList;

            if (!thisClassList.contains('start')) {
                thisClassList.remove('active');                
            }else{
                thisClassList.add('active')
            }
        })
    }
}

function controlCabinet(buttons, main, minWidth){
    let thisWidth = window.innerWidth;
    let thisMain = document.querySelector(main);
    

    if (thisWidth <= minWidth) {
        let thisButtons = document.querySelectorAll(buttons);
        // let thisContents = document.querySelectorAll(contents);

        thisButtons.forEach(e => {
            e.onclick = function (element){
                let thisContent = document.querySelector(`.cabinet__${e.dataset.cabinet}`);
                let newHeight = thisContent.clientHeight + 48;
                let thisButton = element.target;

                thisMain.style.height = `${newHeight}px`

                if (!thisContent.classList.contains('active')) {
                    thisMain.querySelector('.active').classList.remove('active');
                    thisContent.classList.add('active');
                }

                thisButtons.forEach(e => {
                    e.classList.remove('active');
                })
                thisButton.classList.add('active');
            }
        })

    }
}