import { ISidebarMenuItem } from '../interfaces/components/ISidebarMenuItem';

export class SidebarMenuItem implements ISidebarMenuItem {

    private container: HTMLElement;

    private subItems: HTMLElement;

    private subItemsToggleButton: HTMLElement;

    private itemName: HTMLElement;

    private itemButton: HTMLElement;

    private isSubItemsCollapsed: boolean = true;

    public init(container: HTMLElement) {
        this.container = container;
        this.subItems = this.container.querySelector('.js-sub-items');
        this.subItemsToggleButton = this.container.querySelector('.js-sub-items-toggle-button');
        this.itemName = this.container.querySelector('.js-item-name');
        this.itemButton = this.container.querySelector('.js-sidebar-menu-item-button');
        this.eventListen();
    }

    private eventListen() {
        if (this.itemButton) {
            this.itemButton.onclick = this.onClick.bind(this);
        }
    }

    private onClick(event: Event) {
        this.subItemsToggle();
    }

    private subItemsToggle(): void {
        if (this.isSubItemsCollapsed) {
            this.showSubItems();
        } else {
            this.hideSubItems();
        }
    }

    private hideSubItems() {
        this.isSubItemsCollapsed = true;
        this.container.classList.remove('menu-open');
    }

    private showSubItems() {
        this.isSubItemsCollapsed = false;
        this.container.classList.add('menu-open');
    }
}