import { IFileContextMenu } from '../../interfaces/components/file-input/IFileContextMenu';
import { TFilesBrowserIcon } from '../../types/TFilesBrowserIcon';
import { IFilesBrowserCommands } from '../../interfaces/commands/IFilesBrowserCommands';
import { IFileInputBus } from '../../interfaces/bus/IFileInputBus';

export class FileContextMenu implements IFileContextMenu {

    protected html: string = `
        <div class="fb-context-menu">
            <div class="fb-context-menu-item js-rename-button">
                Переименовать
            </div>
            <div class="fb-context-menu-item js-delete-button">
                Удалить
            </div>
        </div>
    `;

    protected _template: HTMLElement;

    protected renameButton: HTMLElement;

    protected deleteButton: HTMLElement;

    protected fileBrowserCommands: IFilesBrowserCommands;

    protected fileBrowserBus: IFileInputBus;

    protected data: TFilesBrowserIcon;

    public setFilesBrowserCommands(commands: IFilesBrowserCommands) {
        this.fileBrowserCommands = commands;
    }

    public setFileBrowserBus(bus: IFileInputBus) {
        this.fileBrowserBus = bus;
    }

    public constructor() {
        let div = document.createElement('div');
        div.innerHTML = this.html.trim();
        this._template = <HTMLElement>div.firstChild;
        this.renameButton = this._template.querySelector('.js-rename-button');
        this.deleteButton = this._template.querySelector('.js-delete-button');
    }

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

    public eventsListen() {
        this.deleteButton.onclick = (e: Event) => {
            if (confirm('Удалить ' + this.data.name + '?')) {
                this.fileBrowserCommands.deleteFile(this.data.path + '/' + this.data.name)
                    .then((resp: any) => {
                        if (resp.success) {
                            this.fileBrowserBus.deletedFile(this.data.path + '/' + this.data.name);
                        }
                    });
                this.hide();
            }
        };
        this.renameButton.onclick = (e: Event) => {
            let newName = '';
            this.fileBrowserBus.execItemModal(this.data.name)
                .then((name: string) => {
                    newName = name;
                    return this.fileBrowserCommands.renameFile(this.data.path + '/' + this.data.name, this.data.path + '/' + name);
                })
                .then((resp: any) => {
                    if (resp.success) {
                        this.fileBrowserBus.renamedFile(this.data.path + '/' + this.data.name, newName);
                    }
                });
            this.hide();
        };
    }

    public show(x: number, y: number, data: TFilesBrowserIcon) {
        this.data = data;
        this._template.style.top = y.toString() + 'px';
        this._template.style.left = x.toString() + 'px';
        this._template.style.display = 'block';
    }

    public hide() {
        this._template.style.display = 'none';
    }

}