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

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

export class TreeSelect implements ITreeSelect {

    protected getHtml(): string
    {
        return `
            <div class="object-field dropdown">
                <label class="form-label js-label"></label>
                <div class="input-group">
                    <input type="text" class="form-control js-input" disabled>
                    <div class="input-group-append">
                        <a href="#" class="input-group-text btn-info js-dropdown-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-arrow-down" viewBox="0 0 16 16">
                                <path d="M8.5 6.5a.5.5 0 0 0-1 0v3.793L6.354 9.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 10.293V6.5z"/>
                                <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
                            </svg>
                        </a>
                    </div>
                </div>
                <div class="js-dropdown-menu tree-dropdown dropdown-menu">
                    <ul class="tree-dropdown-ul js-tree-dropdown-ul">
                        
                    </ul>
                </div>
                <div class="invalid-feedback js-error-message"></div>
            </div>
        `;
    }

    protected _template:HTMLElement;

    protected input:HTMLInputElement;

    protected dropdownBtn:HTMLElement;

    protected dropdownMenu:HTMLElement;

    protected dropdownMenuUl:HTMLElement;

    protected data:TTreeSelectObject;

    protected formKey:string;

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

    protected dropItems:TDropItems = {};

    public constructor()
    {
        let div = document.createElement('div');
        div.innerHTML = this.getHtml().trim();
        this._template = <HTMLElement>div.firstChild;
        this.input = this._template.querySelector('.js-input');
        this.dropdownBtn = this._template.querySelector('.js-dropdown-btn');
        this.dropdownMenu = this._template.querySelector('.js-dropdown-menu');
        this.dropdownMenuUl = this.dropdownMenu.querySelector('.js-tree-dropdown-ul');
    }

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

    public setDropdownItemCreator(callback:()=>IDropdownItem): void
    {
        this.dropdownItemCreator = callback;
    }

    public loadData(data: TTreeSelectObject): void
    {
        this.data = data;
        this.dropdownMenuUl.innerHTML = '';
        for(let i in this.data.childs){
            let dropItem = this.dropdownItemCreator(this);
            dropItem.loadData(this.data.childs[i]);
            this.dropItems[i] = dropItem;
            this.dropdownMenuUl.appendChild(dropItem.template);
        }
    }

    public showErrors(): void 
    {
        
    }

    public clearErrors(): void
    {
        
    }

    public serialize(): TTreeSelectObject
    {
        return this.data;
    }

    public eventsListen(): void
    {
        this.dropdownBtn.onclick = ()=>{
            this.dropdownMenu.classList.toggle('show');
        }
        for(let i in this.dropItems){
            this.dropItems[i].eventsListen();
        }
    }

    public setFormKey(key: string): void
    {
        this.formKey = key;
    }

    public hideDropdown(): void
    {
        this.dropdownMenu.classList.remove('show');
    }

    public setValue(val:any): void
    {
        this.data.value = val;
    }

    public setAlias(align:string): void
    {
        this.input.value = align;
        this.data.alias = align;
    }

}