import { Metrics, DarkPalette } from "theme.slint";
import { Box, Button, HorizontalSeparator, VerticalBox } from "widgets/components.slint";

export enum ToolType {
    Select,
    Move,
    Rotate,
    Scale,
    Brush,
    Light,
    Area,
    Object,
    Flow,
    Room,
    Texture,
    Timeline,
    Multibrush,
}

component ToolBarItem inherits Button {
    width: Metrics.size-lg;
    height: Metrics.size-lg;
    p-elevation: 0;
}

export component ToolBar inherits VerticalBox {
    width: Metrics.size-xl;
    p-alignment: start;

    out property <ToolType> p-current-tool: ToolType.Select;

    private property <[{text: string, type: ToolType}]> p-transform-tools: [
        { text: "s", type: ToolType.Select },
        { text: "m", type: ToolType.Move },
        { text: "r", type: ToolType.Rotate },
        { text: "s", type: ToolType.Scale },
    ];
    private property <[{text: string, type: ToolType}]> p-brush-tools: [
        { text: "b", type: ToolType.Brush },
        { text: "o", type: ToolType.Object },
        { text: "f", type: ToolType.Flow },
        { text: "r", type: ToolType.Room },
        { text: "l", type: ToolType.Light },
        { text: "a", type: ToolType.Area },
    ];
    private property <[{text: string, type: ToolType}]> p-other-tools: [
        { text: "t", type: ToolType.Texture },
        { text: "t", type: ToolType.Timeline },
        { text: "m", type: ToolType.Multibrush },
    ];

    for item[index] in root.p-transform-tools: ToolBarItem {
        p-text: item.text;
        a-clicked => {
            root.p-current-tool = item.type;
        }
    }

    HorizontalSeparator { }

    for item[index] in root.p-brush-tools: ToolBarItem {
        p-text: item.text;
        a-clicked => {
            root.p-current-tool = item.type;
        }
    }

    HorizontalSeparator { }

    for item[index] in root.p-other-tools: ToolBarItem {
        p-text: item.text;
        a-clicked => {
            root.p-current-tool = item.type;
        }
    }
}