import Bind from "@web-atoms/core/dist/core/Bind";
import XNode from "@web-atoms/core/dist/core/XNode";
import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
import FileCommandStyle from "./FileCommandStyle";
import FileCommandViewModel from "./FileCommandViewModel";

export default class FileCommand extends AtomControl {

    public viewModel: FileCommandViewModel;

    public create() {

        this.defaultControlStyle = FileCommandStyle;

        this.viewModel = this.resolve(FileCommandViewModel);

        this.render(<div class={this.controlStyle.name}>
            <div
                class="command"
                title="Create new file/files under here"
                styleDisplay={Bind.oneWay(() => this.viewModel.file.isFolder ? "" : "none")}
                eventClick={Bind.event(() => this.viewModel.createNewFile())}>New Item</div>
            <div
                class="command"
                title="Create new folder under here"
                styleDisplay={Bind.oneWay(() => this.viewModel.file.isFolder ? "" : "none")}
                eventClick={Bind.event(() => this.viewModel.createNewFolder())}>New Folder</div>
            <div
                class="command"
                title="Upload new file/files under here"
                styleDisplay={Bind.oneWay(() => this.viewModel.file.isFolder ? "" : "none")}
                eventClick={Bind.event(() => this.viewModel.uploadFile())}>Upload image</div>
            <div
                class="command"
                title={Bind.oneWay(() => `Rename this ${this.viewModel.file.isFolder ? "Folder" : "File"}`)}
                eventClick={Bind.event(() => this.viewModel.renameFile())}>Rename</div>
            <div
                class="command"
                title="Delete this file"
                eventClick={Bind.event(() => this.viewModel.deleteFile())}>Delete</div>
        </div>);
    }

}