import {IBox} from '../interfaces/components/IBox';
import {IAdminPanelBus} from '../interfaces/bus/IAdminPanelBus';

export class Box implements IBox {

    private container:HTMLElement;

    private parent:HTMLElement;

    private title:HTMLElement;

    private collapseButton:HTMLElement;

    private fullScreenButton:HTMLElement;

    private removeButton:HTMLElement;

    private body:HTMLElement;

    private isCollapsed:boolean = false;

    private isFullscreen:boolean = false;

    private adminPanelBus:IAdminPanelBus;

    public get element():HTMLElement
    {
        return this.container;
    }

    public get width(): number
    {
        return this.container.clientWidth;
    }

    public get height(): number
    {
        return this.container.clientHeight;
    }

    public setAdminPanelBus(bus:IAdminPanelBus): void
    {
        this.adminPanelBus = bus;
    }

    public init(container:HTMLElement)
    {
        this.container = container;
        this.parent = this.container.parentElement;
        this.title = this.container.querySelector('.js-box-title');
        this.collapseButton = this.container.querySelector('.js-collapse-button');
        this.fullScreenButton = this.container.querySelector('.js-fullscreen-button');
        this.removeButton = this.container.querySelector('.js-remove-button');
        this.body = this.container.querySelector('.js-box-body');
        let collapse = this.container.getAttribute('collapse');
        if(collapse == 'true'){
            this.isCollapsed = true;
        }
        this.eventListen();
    }

    private eventListen(){
        if(this.removeButton){
            this.removeButton.onclick = this.onRemoveButtonClick.bind(this);
        }
        if(this.collapseButton){
            this.collapseButton.onclick = this.onCollapseButtonClick.bind(this);
        }
        if(this.fullScreenButton){
            this.fullScreenButton.onclick = this.onFullscreenClick.bind(this);
        }
    }

    private onRemoveButtonClick(event:Event)
    {
        this.container.remove();
    }

    private onCollapseButtonClick(event:Event)
    {
        let icon = this.collapseButton.querySelector('i');
        if(this.isCollapsed){
            this.isCollapsed = false;
            this.slideDown(this.body, 500);
            icon.classList.remove('fa-plus');
            icon.classList.add('fa-minus');
        }else{
            this.isCollapsed = true;
            this.slideUp(this.body, 500);
            icon.classList.remove('fa-minus');
            icon.classList.add('fa-plus');
        }
    }

    private slideUp(element:HTMLElement, duration:number) {
        element.style.transitionProperty = 'height, margin, padding';
        element.style.transitionDuration = duration + 'ms';
        element.style.boxSizing = 'border-box';
        element.style.height = element.offsetHeight + 'px'; // сохраняем текущую высоту элемента
        element.offsetHeight; // принудительная перерисовка
        element.style.overflow = 'hidden';
        element.style.height = '0'; // устанавливаем высоту 0 для анимации скрытия
        element.style.paddingTop = '0'; // также можно устанавливать padding и margin равные 0
        element.style.paddingBottom = '0';
        element.style.marginTop = '0';
        element.style.marginBottom = '0';
        setTimeout(function() {
            element.style.display = 'none';
        }, duration); // после завершения анимации скрываем элемент
    }

    private slideDown(element:HTMLElement, duration:number) {
        element.style.removeProperty('display'); // убираем display: none, чтобы элемент стал видимым
        element.style.transitionProperty = 'height, margin, padding';
        element.style.transitionDuration = duration + 'ms';
        element.style.boxSizing = 'border-box';
        element.style.display = 'block'; // убеждаемся, что элемент видим
        element.style.overflow = 'hidden';
        element.style.height = '0'; // устанавливаем высоту 0 для анимации появления
        element.style.paddingTop = '0'; // также можно устанавливать padding и margin равные 0
        element.style.paddingBottom = '0';
        element.style.marginTop = '0';
        element.style.marginBottom = '0';
        element.offsetHeight; // принудительная перерисовка
        element.style.height = element.scrollHeight + 'px'; // устанавливаем полную высоту элемента
    }    

    private onFullscreenClick(event:Event)
    {
        let icon = this.fullScreenButton.querySelector('i');
        if(this.isFullscreen){
            icon.classList.remove('fa-compress');
            icon.classList.add('fa-arrows-alt');
            this.parent.append(this.container);
            this.adminPanelBus.collapsescreen(this);
            this.eventListen();
        }else{
            icon.classList.remove('fa-arrows-alt');
            icon.classList.add('fa-compress');
            this.adminPanelBus.fullscreen(this);
            this.eventListen();
        }
        this.isFullscreen = !this.isFullscreen;
    }

    public setTitle(title:string):void
    {
        this.title.innerText = title;
    }

}