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

component TabItem {
    in property <bool> scanning;
    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 (GuiState.active_tab == root.curr-tab) {
                    return;
                }
                GuiState.active_tab = root.curr-tab;
                Callabler.tab_changed();
                changed_current_tab();
            }
        }
    }

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

            current_rectangle := Rectangle {
                visible: (GuiState.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 GuiState.active_tab == root.curr-tab: {
            current_rectangle.height: layout_rectangle.height;
        }
        is-not-selected when GuiState.active_tab != root.curr-tab: {
            current_rectangle.height: 0px;
        }
    ]
}

export component LeftSidePanel {
    in-out property <bool> scanning;
    callback changed_current_tab();
    width: 120px;
    VerticalLayout {
        spacing: 10px;
        Rectangle {
            visible: GuiState.active_tab != CurrentTab.About;
            height: 80px;
            Image {
                width: parent.height;
                source: @image-url("../icons/logo.png");
                image-fit: ImageFit.contain;
            }
            touch_area := TouchArea {
                clicked => {
                    GuiState.active_tab = CurrentTab.About;
                    Callabler.tab_changed();
                    root.changed_current_tab();
                    GuiState.bottom_panel_visibility = BottomPanelVisibility.NotVisible;
                }
            }
        }

        ListView {
            out property <length> element-size: 25px;
            out property <[{name: string, tab: CurrentTab}]> speed_model: [
                {name: "Duplicate Files", tab: CurrentTab.DuplicateFiles},
                {name: "Empty Folders", tab: CurrentTab.EmptyFolders}, 
                {name: "Big Files", tab: CurrentTab.BigFiles},
                {name: "Empty Files", tab: CurrentTab.EmptyFiles}, 
                {name: "Temporary Files", tab: CurrentTab.TemporaryFiles},
                {name: "Similar Images", tab: CurrentTab.SimilarImages},
                {name: "Similar Videos", tab: CurrentTab.SimilarVideos},
                {name: "Music Duplicates", tab: CurrentTab.SimilarMusic},
                {name: "Invalid Symlinks", tab: CurrentTab.InvalidSymlinks},
                {name: "Broken Files", tab: CurrentTab.BrokenFiles},
                {name: "Bad Extensions", tab: CurrentTab.BadExtensions}
            ];

            for r[idx] in  speed_model: TabItem {
                height: parent.element-size;
                scanning: scanning;
                text: r.name;
                curr_tab: r.tab;
                changed_current_tab() => {root.changed_current_tab();}
            }
            
        }

        Rectangle {
            HorizontalLayout {
                alignment: start;
                Button {
                    visible: GuiState.available_subsettings;
                    min-width: 20px;
                    min-height: 20px;
                    max-height: self.width;
                    preferred-height: self.width;
                    icon: @image-url("../icons/settings.svg");
                    clicked => {
                        GuiState.visible_tool_settings = !GuiState.visible-tool-settings;
                    }
                }
            }
            HorizontalLayout {
                alignment: end;
                Button {
                    visible: GuiState.active_tab != CurrentTab.Settings;
                    min-width: 20px;
                    min-height: 20px;
                    max-height: self.width;
                    preferred-height: self.width;
                    icon: @image-url("../icons/settings.svg");
                    clicked => {
                        GuiState.active_tab = CurrentTab.Settings;
                        Callabler.tab_changed();
                        root.changed_current_tab();
                    }
                }
            }
        }
    }
}