import { HorizontalBox, Palette } from "std-widgets.slint";

component Tab {
    in property <string> text;
    in property <image> icon;
    in property <bool> selected;

    callback clicked <=> touch.clicked;

    max-height: l.preferred-height;

    states [
        pressed when touch.pressed && !root.selected: {
            state.opacity: 0.8;
        }
        hover when touch.has-hover && !root.selected: {
            state.opacity: 0.6;
        }
        selected when root.selected: {
            state.opacity: 1;
        }
    ]

    state := Rectangle {
        opacity: 0;
        background: Palette.background.darker(0.1);
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;

        animate opacity { duration: 150ms; }
    }

    l := HorizontalBox {
        alignment: center;

        Image {
            source: root.icon;
            width: 15px;
            colorize: Palette.control-foreground;
        }

        Text {
            text: root.text;
        }
    }

    touch := TouchArea {
        width: 100%;
        height: 100%;
    }
}

export component TabContainer {
    Rectangle {
        background: Palette.background.darker(0.1);
        border-width: 1px;
        border-color: Palette.border;
        border-radius: 4px;

        VerticalLayout {
            padding: 1px;

            @children
        }
    }
}

export component TabBar {
    in property <[{text: string, icon: image}]> tabs;
    out property <int> current-page;

    Rectangle {
        background: Palette.border;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    HorizontalLayout {
        for tab[index] in root.tabs: Tab {
            text: tab.text;
            icon: tab.icon;
            selected: index == root.current-page;
            clicked => {
                root.current-page = index;
            }
        }
    }
}