import {IDropdownItem} from '../../interfaces/components/tree-select/IDropdownItem';
import {TTreeSelectItem, TTreeSelectItems} from '../../types/TTreeSelectObject';
import {ITreeSelect} from '../../interfaces/components/tree-select/ITreeSelect';

type TDropdownItems = {
    [id:string]: IDropdownItem;
}

export class DropdownItem implements IDropdownItem {

    protected getHtml(): string
    {
        return `
            <li>
                <div style="display: flex;">
                    <span class="js-expand-btn" style="display: none;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
                            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                        </svg>
                    </span>
                    <span class="js-title"></span>
                </div>
                <ul class="tree-dropdown-ul js-subitems" style="display:none;">
                </ul>
            </li>
        `;
    }

    protected _template:HTMLElement;

    protected expandBtn:HTMLElement;

    protected title:HTMLElement;

    protected subitemsContainer:HTMLElement;

    protected subitems:TDropdownItems = {};

    protected subitemCreator:(treeSelect:ITreeSelect)=>IDropdownItem;

    protected data:TTreeSelectItem;

    protected isCollapsed = true;

    protected onClick:(self:IDropdownItem)=>void;

    protected container:ITreeSelect;

    public constructor(container:ITreeSelect)
    {
        this.container = container;
        let div = document.createElement('div');
        div.innerHTML = this.getHtml().trim();
        this._template = <HTMLElement>div.firstChild;
        this.expandBtn = this._template.querySelector('.js-expand-btn');
        this.title = this._template.querySelector('.js-title');
        this.subitemsContainer = this._template.querySelector('.js-subitems');
    }

    public setSubitemCreator(callback:()=>IDropdownItem): void
    {
        this.subitemCreator = callback;
    }

    public setOnClick(callback:(self:IDropdownItem)=>void): void
    {
        this.onClick = callback;
    }

    public get template(): HTMLElement
    {
        return this._template;
    }

    public loadData(data:TTreeSelectItem): void
    {
        this.data = data;
        this.title.innerText = data.title;
        this.subitemsContainer.innerHTML = '';
        this.subitems = {};
        if(data.childs && Object.keys(data.childs).length > 0){
            this.expandBtn.style.display = 'initial';
        }
        for(let i in data.childs){
            let item = this.subitemCreator(this.container);
            item.loadData(data.childs[i]);
            this.subitems[i] = item;
            this.subitemsContainer.appendChild(item.template);
        }
    }

    public getData(): TTreeSelectItem
    {
        return this.data;
    }

    public eventsListen(): void
    {
        this.expandBtn.onclick = ()=>{
            this.toggleExpand();
        };
        this.title.onclick = ()=>{
            this.onClick(this);
        }
        for(let i in this.subitems){
            this.subitems[i].eventsListen();
        }
    }

    public toggleExpand(): void
    {
        if(this.isCollapsed){
            this.subitemsContainer.style.display = 'block';
        }else{
            this.subitemsContainer.style.display = 'none';
        }
        this.isCollapsed = !this.isCollapsed;
    }

    public getAlias(val:any): string
    {
        if(this.data.value == val){
            return this.data.alias;
        }
        for(let i in this.subitems){
            let alias = this.subitems[i].getAlias(val);
            if(alias){
                return alias;
            }
        }
        return '';
    }

}