import { IDir } from '../interfaces/components/IDir';
import { IAppBus } from '../interfaces/bus/IAppBus';
import * as types from '../types';

declare let settings: types.TSettings;

export class Dir implements IDir {

    protected html: string = `
        <div class="dir">
            <div class="item-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-folder" viewBox="0 0 16 16">
                    <path d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4H2.19zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707z"/>
                </svg>
            </div>
            <div class="item-name js-name"></div>
            <div class="tooltiptext js-full-name"></div>
        </div>
    `;

    protected _template: HTMLElement;

    protected name: HTMLElement;

    protected fullName: HTMLElement;

    protected appBus: IAppBus;

    protected data: types.TDir;

    public constructor() {
        let div = document.createElement('div');
        div.innerHTML = this.html.trim();
        this._template = <HTMLElement>div.firstChild;
        this.name = this._template.querySelector('.js-name');
        this.fullName = this._template.querySelector('.js-full-name');
    }

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

    public get id(): string {
        return this.data.id;
    }

    public setAppBus(bus: IAppBus) {
        this.appBus = bus;
    }

    public eventsListen() {
        let options = {
            title: this.data.name,
        };
        this.makeTooltip(this.name, options);

        this._template.onclick = () => {
            window.location.href = settings.url + '?dir-id=' + this.data.id;
        };
        this._template.oncontextmenu = (e: Event) => {
            e.preventDefault();
            this.appBus.execDirContextMenu((<any>e).pageX, (<any>e).pageY, this.data);
        };
    }

    private makeTooltip(el: HTMLElement, options: any): void {
        const tooltipText = <HTMLElement>(el.nextElementSibling);
        tooltipText.innerText = options.title;
        el.addEventListener('mouseover', () => {
            tooltipText.style.visibility = 'visible';
            tooltipText.style.opacity = '1';
        });

        el.addEventListener('mouseout', () => {
            tooltipText.style.visibility = 'hidden';
            tooltipText.style.opacity = '0';
        });
    }

    public load(data: types.TDir) {
        this.data = data;
        this.name.innerText = data.name;
        this.fullName.innerText = data.name;
    }

    public rename(name: string) {
        this.name.innerText = name;
    }

    public createSelf(): Dir {
        return new Dir();
    }

}