import AppState, { AppStateEvent } from "@/AppState";
import { TrackUnitStickingTypeList, TrackUnitTypeList } from "@/TrackUnit";
import { Capsule, h, frag, Rung, RungOptions, ISubscriber } from "@djledda/ladder";
import TrackUnitView, { StickingTypeIconMap } from "../TrackUnit/TrackUnitView";
import IconView from "../Widgets/Icon/IconView";
import "./Toolbox.css";

type ToolboxOptions = RungOptions & {
    state: AppState,
};

export default class ToolboxView extends Rung<HTMLDivElement> implements ISubscriber<AppStateEvent> {
    private state: AppState;

    constructor(options: ToolboxOptions) {
        super(options);
        this.state = options.state;
        this.state.addSubscriber(this, 'appstate-tool-select');
    }

    notify(publisher: unknown, event: AppStateEvent): void {
        if (event === 'appstate-tool-select') {
            this.redraw();
        }
    }

    private SubMenuButtons = () => {
        switch (this.state.selectedTool) {
            case "track-unit-type":
                return <div className={"details"}>{...TrackUnitTypeList.map(type => (
                    <div 
                        className={`toolbox-button${type === this.state.activeTrackUnitType ? " active" : ""}`}
                        onclick={() => this.state.selectTrackUnitTypePaint(type)}>
                        <div classes={TrackUnitView.getClasses({ on: true, type, stickingType: "none" })} />
                    </div>
                ))}</div>;
            case "sticking":
                return <div className={"details"}>{...TrackUnitStickingTypeList.reduce((prev, stickingType) => {
                    if (stickingType !== "none") {
                        prev.push(<div 
                            className={`toolbox-button${stickingType === this.state.activeStickingType ? " active" : ""}`}
                            onclick={() => this.state.selectStickingTypePaint(stickingType)}>
                            {new IconView({ iconName: StickingTypeIconMap[stickingType] })}
                        </div> as HTMLButtonElement);
                    }
                    return prev;
                }, [] as HTMLElement[])}</div>;
            case "eraser":
                return <div className={"details hidden"} />;
        }
    }

    protected build() {
        return <div className={"root-toolbox"}>
            <div className={"main-row"}>
                <div 
                    className={`toolbox-button${this.state.selectedTool === "track-unit-type" ? " active" : ""}`} 
                    onclick={() => this.state.selectTool("track-unit-type")}>
                    Track Type
                </div>
                <div 
                    className={`toolbox-button${this.state.selectedTool === "sticking" ? " active" : ""}`} 
                    onclick={() => this.state.selectTool("sticking")}>
                    Sticking
                </div>
                <div 
                    className={`toolbox-button${this.state.selectedTool === "eraser" ? " active" : ""}`} 
                    onclick={() => this.state.selectTool("eraser")}>
                    Eraser
                </div>
            </div>
            <this.SubMenuButtons />
        </div> as HTMLDivElement;
    }
}