import {
    TabWidget,
    AboutSlint,
    Button,
    LineEdit,
    ListView,
    CheckBox,
    ScrollView,
    GridBox,
} from "std-widgets.slint";
import { SettingsView } from "settings.slint";
import { State, SItem } from "state.slint";
export { State, SItem }


component GoodListItem inherits Rectangle {
    in-out property <SItem> item;
    background: #ffffff10;
    border-radius: 8pt;
    border-width: 10pt;
    HorizontalLayout {
        spacing: 8px;
        padding: 8px;

        check := CheckBox {
            checked: root.item.checked;
            toggled() => {
                State.check-item(item.name);
                debug("CheckBox checked: ", self.checked);
            }
        }

        Text {
            opacity: (root.item.checked ? 0.5 : 1.0);
            font-size: 12pt;
            text: root.item.name;
        }
    }

    input := TouchArea {
        clicked => {
            //root.item.checked = !root.item.checked;
            State.check-item(item.name);
        }
    }
}

component GoodsList {
    in property <[SItem]> items;

    ListView {
        mouse-drag-pan-enabled: true;

        for item in items: VerticalLayout {
            GoodListItem {
                item: item;
            }

            Rectangle {
                height: 4pt;
            }
        }
    }
}

component GoodButtons inherits ScrollView {
    in property <[string]> favorites: ["Mjölk", "Ost", "Ägg", "Bullens", "Oboy", "Mjöl", "Havregryn", "KrosTom"];
    in property <int> button-width: 100;
    in property <int> button-height: 60;
    in property <int> button-spacing: 10;

    property <int> count-x: floor(root.width / 1pt / (button-width + button-spacing));
    property <int> count-y: ceil(favorites.length / count-x);

    viewport-height: (count-y * (button-height + button-spacing)) * 1pt;
    mouse-drag-pan-enabled: true;

    for item[idx] in favorites: Button {
        x: floor(mod(idx, count-x)) * (root.button-width + root.button-spacing) * 1pt;
        y: floor(idx / count-x) * (root.button-height + root.button-spacing) * 1pt;
        width: root.button-width * 1pt;
        height: root.button-height * 1pt;
        text: item;
        clicked => {
            State.add-to-list(item);
        }
    }
}

component RefreshButton inherits HorizontalLayout {
    alignment: center;
    Button {
        text: "Refresh";
        width: 40%;
        clicked() => {
            State.refresh-list();
        }
    }
}

component AddView inherits VerticalLayout {
    in property <[SItem]> list;

    padding: 8px;
    spacing: 8px;

    RefreshButton {}

    goods := GoodsList {
        items <=> list;
    }

    HorizontalLayout {
        height: 42px;
        input := LineEdit {
            font-size: 20px;
        }

        Rectangle {
            width: 4pt; // spacing
        }

        Button {
            width: self.height;
            text: "+";
            clicked => {
                State.add-to-list(input.text);
            }
        }
    }

    GoodButtons { }
}

component ShopView inherits VerticalLayout {
    in property <[SItem]> list;

    padding: 8px;
    spacing: 8px;

    RefreshButton {}

    goods := GoodsList {
        items <=> list;
    }

    HorizontalLayout {
        padding: 12px;
        Button {
            text: "I am done hehe";
            clicked => {
                State.delete-checked();
            }
        }
    }
}

export component App inherits Window {

    preferred-height: 700px;
    preferred-width: 480px;
    TabWidget {
        Tab {
            title: "Add";
            AddView {
                list <=> State.list;
            }
        }

        Tab {
            title: "Shop";
            ShopView {
                list <=> State.list;
            }
        }

        Tab {
            title: "Settings";
            SettingsView { }
        }
    }
}