import Bind from "@web-atoms/core/dist/core/Bind";
import XNode from "@web-atoms/core/dist/core/XNode";
import { NavigationService } from "@web-atoms/core/dist/services/NavigationService";
import { AtomViewModel } from "@web-atoms/core/dist/view-model/AtomViewModel";
import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
import { AtomItemsControl } from "@web-atoms/core/dist/web/controls/AtomItemsControl";
import FileCommand from "../../commands/file-command/FileCommand";
import IFileModel from "../../model/FileModel";
import TreeViewStyle from "./TreeViewStyle";

export default class TreeView extends AtomItemsControl {

    public localViewModel: TreeViewViewModel;

    public create() {
        this.localViewModel = this.resolve(TreeViewViewModel, "owner");
        this.itemTemplate = TreeViewItem;
        this.render(<div class={Bind.oneTime(() => this.controlStyle.name)}>
            <div itemsPresenter={Bind.presenter("itemsPresenter")}>
            </div>
        </div>);
    }

    protected preCreate() {
        super.preCreate();
        this.defaultControlStyle = TreeViewStyle;
    }

}

class TreeViewItem extends AtomControl {

    public localViewModel: TreeViewViewModel;

    public data: IFileModel;

    public create() {
        this.render(<div
            class={Bind.oneWay(() => ({
                "selected": this.data === this.localViewModel.owner.selectedItem,
                "item": 1,
                "folder": this.data.isFolder,
                "open": this.data.isOpen,
                "read-only": this.data.isReadOnly
            }))}>
            <img
                styleLeft={Bind.oneTime(() => (this.data.indent * 10) + "px")}
                class="icon"
                eventClick={() => this.click()}
                src={Bind.oneWay(() => [this.data.fileIcon, this.data.isOpen][0] )}/>
            <div
                stylePaddingLeft={Bind.oneTime(() => (this.data.indent * 10 + 20) + "px")}
                class="file-name"
                eventClick={() => this.click()}
                text={Bind.oneWay(() => `${ this.data.dirty ? "*" : ""}${this.data.name}`)}/>
            <i
                eventClick={() => this.commands()}
                class="fas fa-ellipsis-h"
                title="Commands"
                />
            {/* <i
                class="fas fa-file-signature"
                eventClick={() => this.modifyFileName()}
                title="Rename"
                />
            <i
                class="fas fa-trash-alt"
                eventClick={() => this.deleteFile()}
                title="Delete"
                /> */}
            <AtomItemsControl
                class="children"
                itemTemplate={TreeViewItem}
                items={Bind.oneWay(() => this.data.isOpen
                    ? this.data.children
                    : [])}/>
        </div>);
    }

    private click() {
        if (this.data.isFolder) {
            this.data.isOpen = !this.data.isOpen;
            return;
        }
        this.localViewModel.owner.selectedItem = this.data;
    }

    private commands() {
        const ns = this.resolve(NavigationService);
        this.app.runAsync(() => ns.openPage(FileCommand, {
            "ref:file": this.data
        }));
    }

    // private createFile() {

    //     // create suitable name

    //     let name = "View.tsx";
    //     let i = 1;
    //     while (this.data.get(name, false)) {
    //         name = `View${i++}.tsx`;
    //     }
    //     name = prompt("Enter Name of the new file", name);
    //     if (!name) {
    //         return;
    //     }
    //     const newFile = this.data.create(name);
    //     this.data.isOpen = true;
    //     newFile.content = "";
    //     this.localViewModel.owner.selectedItem = newFile;
    // }

    // private async modifyFileName() {
    //     const name = prompt("Enter Name of the new file", this.data.name);
    //     if (!name) {
    //         return;
    //     }
    //     if (name !== this.data.name) {
    //         this.data.updateName(name);
    //     }
    // }

    // private deleteFile() {
    //     if (!confirm("Are you sure you want to delete?")) { return; }
    //     this.data.parent.children.remove(this.data);
    // }
}

export class TreeViewViewModel extends AtomViewModel {

    public owner: any;
}