import { setupHorizontalScrollViaWheel } from "../../widget_utils";
import ViewMode, { ViewModeArgs } from "../view_mode";
import { getBoardData } from "./data";

const TPL = /*html*/`
<div class="board-view">
    <style>
        .board-view {
            overflow-x: auto;
            position: relative;
            height: 100%;
            user-select: none;
        }

        .board-view-container {
            height: 100%;
            display: flex;
            gap: 1.5em;
            padding: 1em;
        }

        .board-view-container .board-column {
            width: 250px;
            flex-shrink: 0;
        }

        .board-view-container .board-column h3 {
            font-size: 1em;
        }

        .board-view-container .board-note {
            box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
            margin: 0.65em 0;
            padding: 0.5em;
            border-radius: 5px;
        }

        .board-view-container .board-note .icon {
            margin-right: 0.25em;
        }
    </style>

    <div class="board-view-container"></div>
</div>
`;

export interface StateInfo {

};

export default class BoardView extends ViewMode<StateInfo> {

    private $root: JQuery<HTMLElement>;
    private $container: JQuery<HTMLElement>;

    constructor(args: ViewModeArgs) {
        super(args, "board");

        this.$root = $(TPL);
        setupHorizontalScrollViaWheel(this.$root);
        this.$container = this.$root.find(".board-view-container");

        args.$parent.append(this.$root);
    }

    async renderList(): Promise<JQuery<HTMLElement> | undefined> {
        this.$container.empty();
        this.renderBoard(this.$container[0]);

        return this.$root;
    }

    private async renderBoard(el: HTMLElement) {
        const data = await getBoardData(this.noteIds, "status");

        for (const column of data.byColumn.keys()) {
            const columnNotes = data.byColumn.get(column);
            if (!columnNotes) {
                continue;
            }

            const $columnEl = $("<div>")
                .addClass("board-column")
                .append($("<h3>").text(column));

            for (const note of columnNotes) {
                const $iconEl = $("<span>")
                    .addClass("icon")
                    .addClass(note.getIcon());

                const $noteEl = $("<div>")
                    .addClass("board-note")
                    .text(note.title); // Assuming FNote has a title property
                $noteEl.prepend($iconEl);
                $columnEl.append($noteEl);
            }

            $(el).append($columnEl);
        }
    }

}