import Bind from "@web-atoms/core/dist/core/Bind";
import XNode from "@web-atoms/core/dist/core/XNode";
import { AtomListBox } from "@web-atoms/core/dist/web/controls/AtomListBox";
import { AtomWindow } from "@web-atoms/core/dist/web/controls/AtomWindow";
import AtomField from "@web-atoms/web-controls/dist/form/AtomField";
import AtomForm from "@web-atoms/web-controls/dist/form/AtomForm";
import IContentModel from "../../model/IContentModel";
import NewItemViewModel from "./NewItemViewModel";

const BindItem = Bind.forData<IContentModel>();

export default class NewItem extends AtomWindow {

    public viewModel: NewItemViewModel;

    public create() {

        this.viewModel = this.resolve(NewItemViewModel);

        this.render(<AtomWindow>
            <AtomWindow.windowTemplate>
                <AtomForm>
                    <AtomField label="Folder:">
                        <input
                            type="text"
                            value={Bind.twoWays(() => this.viewModel.folder )}/>
                    </AtomField>
                    <AtomField label="Type">
                        <AtomListBox
                            items={this.viewModel.templates}
                            selectedItem={Bind.twoWays(() => this.viewModel.selected)}>
                            <AtomListBox.itemTemplate>
                                <div text={BindItem.oneTime((x) => x.data.label)}></div>
                            </AtomListBox.itemTemplate>
                        </AtomListBox>
                    </AtomField>
                    <AtomField label="Name:">
                        <input
                            type="text"
                            placeholder={Bind.oneWay(() => this.viewModel.selected.name)}
                            value={Bind.twoWays(() => this.viewModel.name )}/>
                    </AtomField>
                </AtomForm>
            </AtomWindow.windowTemplate>
            <AtomWindow.commandTemplate>
                <button
                    eventClick={Bind.event(() => this.viewModel.create())}>Create</button>
            </AtomWindow.commandTemplate>
        </AtomWindow>);
    }

}