import { Button, VerticalBox , HorizontalBox, TabWidget, ListView, StandardListView, StandardTableView, CheckBox} from "std-widgets.slint";
import {CurrentTab} from "common.slint";
import {ColorPalette} from "color_palette.slint";

component TabItem {
    in property <bool> scanning;
    in-out property <CurrentTab> active-tab;
    in property <string> text;
    in property <CurrentTab> curr_tab;
    callback changed_current_tab();

    Rectangle {
        width: parent.width;
        horizontal-stretch: 1.0;
        background: touch-area.has-hover ? ColorPalette.tab-hovered-color : transparent;
        touch_area := TouchArea {
            clicked => {
                if (root.active-tab == root.curr-tab) {
                    return;
                }
                root.active-tab = root.curr-tab;
                changed_current_tab();
            }
        }
    }

    HorizontalLayout {
        width: parent.width;
        alignment: LayoutAlignment.end;
        layout_rectangle := VerticalLayout {
            empty_rectangle := Rectangle { }

            current_rectangle := Rectangle {
                visible: (root.active-tab == root.curr-tab);
                border-radius: 2px;
                width: 5px;
                height: 0px;
                background: ColorPalette.tab_selected_color;
                animate height{
                    duration: 150ms;
                easing: ease;
                }
            }
            empty_rectangle2 := Rectangle { }
        }
    }

    Text {
        text: root.text;
        width: parent.width;
        horizontal-alignment: center;
    }

    states [
        is-selected when root.active-tab == root.curr-tab: {
            current_rectangle.height: layout_rectangle.height;
        }
        is-not-selected when root.active-tab != root.curr-tab: {
            current_rectangle.height: 0px;
        }
    ]
}

export component LeftSidePanel {
    in-out property <CurrentTab> active-tab;
    in-out property <bool> scanning;
    callback changed_current_tab();
    width: 120px;
    VerticalLayout {
        spacing: 20px;
        Rectangle {
            height: 100px;
            Image {
                width: root.width;
                source: @image-url("../icons/logo.png");
            }
        }

        VerticalLayout {
            // spacing: 3px;
            alignment: center;
            out property <length> element-size: 25px;
            TabItem {
                height: parent.element-size;
                scanning: scanning;
                text: "Empty Folders";
                active-tab <=> root.active-tab;
                curr_tab: CurrentTab.EmptyFolders;
                changed_current_tab() => {root.changed_current_tab();}
            }

            TabItem {
                height: parent.element-size;
                scanning: scanning;
                text: "Empty Files";
                active-tab <=> root.active-tab;
                curr_tab: CurrentTab.EmptyFiles;
                changed_current_tab() => {root.changed_current_tab();}
            }

            TabItem {
                height: parent.element-size;
                scanning: scanning;
                text: "Similar Images";
                active-tab <=> root.active-tab;
                curr_tab: CurrentTab.SimilarImages;
                changed_current_tab() => {root.changed_current_tab();}
            }
        }

        HorizontalLayout {
            height: 20px;
            alignment: end;
            Image {
                width: 20px;
                source: @image-url("../icons/settings.svg");
            }
        }
    }
}