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 { AtomItemsControl } from "@web-atoms/core/dist/web/controls/AtomItemsControl";
import { AtomToggleButtonBar } from "@web-atoms/core/dist/web/controls/AtomToggleButtonBar";
import FileModel, { IFileMessage } from "../../model/FileModel";
import LogView from "../log-view/LogView";
import MessageListStyle from "./MessageListStyle";
import MessagesViewModel from "./MessagesViewModel";

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

const BindMessage = Bind.forData<IFileMessage>();

export default class MessageList extends AtomControl {

    public viewModel: MessagesViewModel;

    public create() {

        this.defaultControlStyle = MessageListStyle;

        this.viewModel = this.resolve(MessagesViewModel);

        this.render(<div class={this.controlStyle.name}>
            <header class="header">
                <AtomToggleButtonBar
                    items={this.viewModel.views}
                    value={Bind.twoWays(() => this.viewModel.selectedView )}/>
            </header>
            <div class="body">
                {/* Problems */}
                <AtomItemsControl
                    styleDisplay={Bind.oneWay(() => this.viewModel.selectedView === "problems" ? "" : "none")}
                    class="files"
                    items={Bind.oneWay(() => this.viewModel.sourceService.messages)}>
                    <AtomItemsControl.itemTemplate>
                        <div class="file">
                            <span
                                class="title"
                                text={BindFileModel.oneTime((x) => x.data.url)}></span>
                            <AtomItemsControl
                                class="messages"
                                items={BindFileModel.oneWay((x) => x.data.messages)}>
                                <AtomItemsControl.itemTemplate>
                                    <div
                                        eventClick={BindMessage.event((x) => this.app.broadcast("open-url", {
                                            url: x.data.model.url,
                                            start: x.data.start,
                                            length: x.data.length
                                        }))}
                                        class={BindMessage.oneTime((x) => ({
                                            item: 1,
                                            error: x.data.category === 1,
                                            warning: x.data.category === 0,
                                            suggestion: x.data.category === 2,
                                            message: x.data.category === 3
                                        }))}
                                        text={BindMessage.oneTime((x) => x.data.messageText)}></div>
                                </AtomItemsControl.itemTemplate>
                            </AtomItemsControl>
                        </div>
                    </AtomItemsControl.itemTemplate>
                </AtomItemsControl>
                <LogView
                    styleDisplay={Bind.oneWay(() => this.viewModel.selectedView !== "problems" ? "" : "none")}
                    logs={Bind.oneWay(() => this.viewModel.selectedLogs)}
                    />
            </div>
        </div>);
    }

}