'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');


controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet);

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

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

        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');

                    setTimeout(() => {
                        thisMain.style.height = 'auto';

                        if (thisMain.querySelector('.hide')) {
                            thisMain.querySelector('.hide').classList.remove('hide');
                        }

                        thisMain.querySelector('.active').classList.add('hide');
                    }, 200);
                }

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

    }
}