import Bind from "@web-atoms/core/dist/core/Bind";
import XNode from "@web-atoms/core/dist/core/XNode";
import { AtomItemsControl } from "@web-atoms/core/dist/web/controls/AtomItemsControl";
import { AtomListBox } from "@web-atoms/core/dist/web/controls/AtomListBox";
import { AtomToggleButtonBar } from "@web-atoms/core/dist/web/controls/AtomToggleButtonBar";
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 NewAppStyle from "./NewAppStyle";
import NewAppViewModel from "./NewAppViewModel";
import samples from "./samples/samples";

export default class NewAppWindow extends AtomWindow {

    public viewModel: NewAppViewModel;

    public create() {
        this.defaultControlStyle = NewAppStyle;
        this.viewModel = this.resolve(NewAppViewModel);
        this.render(<AtomWindow
            class={Bind.oneWay(() => ({
                "frame-host": 1,
                [this.controlStyle.name]: 1,
                [this.viewModel.appType]: 1,
            }))}>
            <AtomWindow.windowTemplate>
                <div>
                    {/* <header>
                        <AtomToggleButtonBar
                            items={Bind.oneWay(() => this.viewModel.appTypes)}
                            value={Bind.twoWays(() => this.viewModel.appType)}
                            />
                        <input
                            class="explore"
                            type="search"
                            value={Bind.twoWaysImmediate(() => this.viewModel.search)}/>
                    </header> */}
                    <div class="create">
                        <AtomListBox
                            selectedItem={Bind.twoWays(() => this.viewModel.selected)}
                            items={this.viewModel.templates}>
                            <AtomListBox.itemTemplate>
                                <div text={Bind.oneTime((x) => x.data.label)}></div>
                            </AtomListBox.itemTemplate>
                        </AtomListBox>
                        <AtomForm>
                            <AtomField
                                label="Url"
                                error={Bind.oneWay(() => this.viewModel.errorUrl)}>
                                <input
                                    placeholder="Url of the application (leave blank to auto generate)"
                                    value={Bind.twoWays(() => this.viewModel.url,
                                        ["keyup", "keypress", "keydown", "blur", "change"])}/>
                            </AtomField>
                        </AtomForm>
                    </div>
                    <div
                        class="explore"
                        style="overflow: auto; height: 400px">
                        <AtomItemsControl
                            items={samples}>
                            <AtomItemsControl.itemTemplate>
                                <div
                                    class="sample"
                                    eventClick={Bind.event((x) => this.viewModel.open(x.data))}
                                    styleDisplay={Bind.oneWay((x) => (this.viewModel.search
                                    ? x.data.label.toLowerCase().indexOf(this.viewModel.search) !== -1
                                    : true) ? "" : "none" )}>
                                    <span text={Bind.oneTime((x) => x.data.label)}/>
                                </div>
                            </AtomItemsControl.itemTemplate>
                        </AtomItemsControl>
                    </div>
                </div>
            </AtomWindow.windowTemplate>
            <AtomWindow.commandTemplate>
                <div class="create">
                    <button
                        eventClick={Bind.event(() => this.viewModel.create())}>Create</button>
                </div>
            </AtomWindow.commandTemplate>
        </AtomWindow>);
    }

}