import Bind from "@web-atoms/core/dist/core/Bind";
import { UMD } from "@web-atoms/core/dist/core/types";
import XNode from "@web-atoms/core/dist/core/XNode";
import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
import { AtomGridSplitter } from "@web-atoms/core/dist/web/controls/AtomGridSplitter";
import { AtomGridView } from "@web-atoms/core/dist/web/controls/AtomGridView";
import { AtomItemsControl } from "@web-atoms/core/dist/web/controls/AtomItemsControl";
import {AtomTabbedPage} from "@web-atoms/core/dist/web/controls/AtomTabbedPage";
import logo from "../../images/logo.png";
import Channels from "../Channels";
import CodeEditor from "../code-editor/CodeEditor";
import commands from "../code-editor/commands";
import MessageList from "../controls/messages/MessageList";
import TreeView from "../controls/tree-view/TreeView";
import FileViewer from "../file-viewer/FileViewer";
import IFileModel from "../model/FileModel";
import SourceService from "../services/SourceService";
import AppHostStyle from "./AppHostStyle";
import AppHostViewModel from "./AppHostViewModel";

const BindFileModel = Bind.forData<IFileModel>();

/** Online Editor */
export default class AppHost extends AtomGridView {

    public viewModel: AppHostViewModel;

    public sourceService: SourceService;

    public create() {

        this.defaultControlStyle = AppHostStyle;
        this.viewModel = this.resolve(AppHostViewModel);

        this.sourceService = this.resolve(SourceService);

        this.render(<AtomGridView
            styleClass={this.controlStyle.name}
            style="position: absolute; left:0; right: 0; top:0; bottom:0"
            rows="40, *,5, 100, 26"
            columns="200, 5, *">

            <header
                column="0:3"
                class="header">
                <a
                    style="position:absolute"
                    href="/"
                    target="_tab"
                    title="Web Atoms Home Page"><img src={logo}/></a>
                {/* <button
                    style="margin-left: 40px"
                    class="fas fa-plus-square"
                    title="Create new Web Atoms XF App"
                    eventClick={Bind.event(() => this.viewModel.createNewApp())}
                    /> */}
                <button
                    style="margin-left: 40px"
                    title="Save changes to server"
                    class="fas fa-save"
                    eventClick={Bind.event(() => this.viewModel.save())}
                    />
                <button
                    class="fas fa-play"
                    title="Save and Play"
                    eventClick={Bind.event(() => this.viewModel.publish())}
                    />
                <a
                    class="fas fa-cloud-download-alt"
                    title="Download source code"
                    href={Bind.oneWay(() => this.sourceService.folder
                        ? this.sourceService.folder.downloadUrl
                        : undefined)}
                    styleDisplay={Bind.oneWay(() => this.sourceService.folder && this.sourceService.folder.downloadUrl
                        ? ""
                        : "none")}
                    />

            </header>

            <AtomItemsControl
                column="2"
                items={Bind.oneWay(() => this.viewModel.documents)}>
                <AtomItemsControl.itemTemplate>
                    <div
                        eventClick={BindFileModel.event((x) => this.viewModel.selectedFile = x.data)}
                        styleClass={BindFileModel.oneWay((x) => ({
                            "file-tab": 1,
                            "selected": x.data === this.viewModel.selectedFile,
                            "dirty": x.data.dirty,
                            "read-only": x.data.isReadOnly
                        }))}>
                        <img class="icon" src={BindFileModel.oneTime((x) => x.data.icon)}/>
                        <i class="fas fa-lock"/>
                        <div text={BindFileModel.oneTime((x) => x.data.name)}/>
                        <img
                            eventClick={BindFileModel.event((x, e) => {
                                e.preventDefault();
                                return this.viewModel.closeFile(x.data);
                            })}
                            class="close-button"/>
                    </div>
                </AtomItemsControl.itemTemplate>
            </AtomItemsControl>

            <TreeView
                row="1:3"
                items={Bind.oneWay(() => this.viewModel.root.children)}
                selectedItem={Bind.twoWays(() => this.viewModel.selectedFile)}
                />

            <AtomGridSplitter
                row="1:2"
                column="1"
                />

            <div
                row="1"
                column="2">
                <CodeEditor
                    file={Bind.oneWay(() => this.viewModel.selectedFile)}
                    styleDisplay={Bind.oneWay(() => this.viewModel.selectedFile && this.viewModel.selectedFile.canEdit
                        ? "" : "none")}
                    />

                <FileViewer
                    url={Bind.oneWay(() => this.viewModel.selectedFile && !this.viewModel.selectedFile.canEdit
                        ? this.viewModel.selectedFile.remoteUrl
                        : null)}
                    styleDisplay={Bind.oneWay(() => this.viewModel.selectedFile && this.viewModel.selectedFile.canEdit
                        ? "none"
                        : "")}
                />
            </div>

            <AtomGridSplitter
                row="2"
                column="1:2"
                direction="horizontal"
                />
            <MessageList
                column="2"
                row="3"/>
            <footer
                class="footer"
                row="4"
                column="0:3">
                <div
                    class="status"
                    text={Bind.oneWay(() => this.sourceService.isCompiling
                    ? "Compiling"
                    : "Ready")}/>
                <div
                    class="position"
                    eventClick={() => this.app.broadcast(Channels.EditorTrigger, commands.editor.action.gotoLine)}
                    text={Bind.oneWay(() =>
                        `Line: ${this.sourceService.position.lineNumber}` +
                        `, Column: ${this.sourceService.position.column}`)}
                    />
                <div
                    class="errors">
                    <span text={Bind.oneWay(() => this.sourceService.errors.length
                        ? `${this.sourceService.errors.length} Errors`
                        : "")}/>
                </div>
                <div
                    class="warnings">
                    <span text={Bind.oneWay(() => this.sourceService.warnings.length
                        ? `${this.sourceService.warnings.length} Warnings`
                        : "")}/>
                </div>
                {/* <div
                    class="messages">
                    <span text={Bind.oneWay(() => this.sourceService.messages.length
                        ? `${this.sourceService.messages.length} Messages`
                        : "")}/>
                </div> */}
                <div class="save">
                    <i class="fas fa-save"/>
                    <span
                        eventClick={Bind.event(() => this.viewModel.saveAs())}
                        text="Save As"/>
                </div>
                <div class="issues">
                    <i class="fab fa-github"/>
                    <a text="Issues" href="https://github.com/web-atoms/core/issues" target="_blank"/>
                </div>
                <div class="rating">
                    <i class="fas fa-star"/>
                    <a text="Rate Us" href="https://github.com/web-atoms/core" target="_blank"/>
                </div>
            </footer>

        </AtomGridView>);
    }

}