export class MmuiGlobalPanelComponent {
    panelWrapper: HTMLDivElement;
    transform: string;
    elementHeader: HTMLElement;

    constructor(
        panelWrapperSelector,
        direction = 'right',
        headerSelector = '.mmui-header'
    ) {
        this.elementHeader = document.querySelector(headerSelector);
        this.panelWrapper = document.querySelector(panelWrapperSelector);

        if (direction == 'right') {
            this.transform = 'translateX(100%)';
        } else if (direction == 'left') {
            this.transform = 'translateX(-100%)';
            this.panelWrapper.style.left = '0px';
        }
        this.panelWrapper.style.transform = this.transform;
        this.panelWrapper.style.display = 'block';

        this.setHeaderWrapperHeight();
        document.addEventListener('scroll', () => {
            this.setHeaderWrapperHeight();
        });
        window.addEventListener('resize', () => {
            this.setHeaderWrapperHeight();
        });
    }

    setHeaderWrapperHeight() {
        const headerVisibleHeight =
            this.elementHeader.scrollHeight - window.scrollY;

        this.panelWrapper.style.top = '0px';
        if (headerVisibleHeight > 0) {
            this.panelWrapper.style.top = `${headerVisibleHeight}px`;
        }
    }

    show() {
        this.setHeaderWrapperHeight();
        this.panelWrapper.style.transform = 'translateX(0%)';
    }

    hide() {
        this.panelWrapper.style.transform = this.transform;
    }
}

export class MmuiOverlayPanelComponent {
    panel;

    constructor(selector = '.mmui-panel-overlay') {
        this.panel = document.querySelector(selector);
        this.panel.addEventListener('click', (evt) => {
            evt.preventDefault();
            this.click();
        });
    }

    show() {
        this.panel.style.display = 'block';
    }

    hide() {
        this.panel.style.display = 'none';
    }

    click() {
        this.hide();
    }
}