import { Colors, Typography } from "tokens.slint";

export struct PickerUnitData {
    serial-id: string,
    state: string,
    selectable: bool,    // true when state == "Created" or "Available" (in stock)
    product-id: string,
}

export struct PickerProductData {
    product-id: string,
    name: string,
    units: [PickerUnitData],
}

export component ProductAddToCardPicker inherits Rectangle {
    in property <[PickerProductData]> products;
    in property <string> target-card-id;

    callback product-selected(string, string);       // (product_id, card_id) -- generic add
    callback unit-selected(string, string, string);   // (serial_id, product_id, card_id)
    callback create-unit-clicked(string, string);     // (product_id, card_id)
    callback close-clicked();

    background: Colors.surface-elevated;
    border-radius: 8px;
    clip: true;

    VerticalLayout {
        padding: 16px;
        spacing: 8px;

        // Title
        HorizontalLayout {
            alignment: stretch;
            Text {
                text: "Add Product to Card";
                font-size: Typography.size-lg;
                font-weight: 700;
                color: Colors.text-primary;
            }
            Rectangle {
                width: 24px;
                height: 24px;
                TouchArea {
                    mouse-cursor: pointer;
                    clicked => { root.close-clicked(); }
                }
                Text {
                    text: "x";
                    font-size: Typography.size-sm;
                    color: Colors.text-muted;
                    horizontal-alignment: center;
                    vertical-alignment: center;
                }
            }
        }

        // Product list (scrollable)
        Flickable {
            for product-data[product-index] in root.products : VerticalLayout {
                spacing: 2px;

                // Parent product row
                Rectangle {
                    height: 32px;
                    background: parent-touch.has-hover ? Colors.surface-popup : transparent;
                    border-radius: 4px;

                    HorizontalLayout {
                        padding-left: 8px;
                        padding-right: 8px;
                        spacing: 8px;
                        alignment: stretch;

                        Text {
                            text: product-data.name;
                            font-size: Typography.size-sm;
                            color: Colors.text-primary;
                            vertical-alignment: center;
                        }

                        // Inline + button for creating a new unit
                        Rectangle {
                            width: 24px;
                            height: 24px;
                            border-radius: 4px;
                            background: plus-touch.has-hover ? Colors.accent : transparent;
                            plus-touch := TouchArea {
                                mouse-cursor: pointer;
                                clicked => {
                                    root.create-unit-clicked(product-data.product-id, root.target-card-id);
                                }
                            }
                            Text {
                                text: "+";
                                font-size: Typography.size-sm;
                                color: plus-touch.has-hover ? white : Colors.accent;
                                horizontal-alignment: center;
                                vertical-alignment: center;
                            }
                        }
                    }

                    parent-touch := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            root.product-selected(product-data.product-id, root.target-card-id);
                        }
                    }
                }

                // Child unit rows (indented)
                for unit-data[unit-index] in product-data.units : Rectangle {
                    height: 28px;
                    x: 16px;
                    width: parent.width - 16px;
                    opacity: unit-data.selectable ? 1.0 : 0.5;
                    background: unit-data.selectable && unit-touch.has-hover ? Colors.surface-popup : transparent;
                    border-radius: 4px;

                    HorizontalLayout {
                        padding-left: 8px;
                        spacing: 8px;

                        Text {
                            text: unit-data.serial-id;
                            font-size: Typography.size-xs;
                            color: Colors.text-primary;
                            vertical-alignment: center;
                        }
                        Text {
                            text: unit-data.state;
                            font-size: Typography.size-xs;
                            color: Colors.text-muted;
                            vertical-alignment: center;
                        }
                    }

                    unit-touch := TouchArea {
                        enabled: unit-data.selectable;
                        mouse-cursor: unit-data.selectable ? pointer : default;
                        clicked => {
                            root.unit-selected(unit-data.serial-id, unit-data.product-id, root.target-card-id);
                        }
                    }
                }
            }
        }
    }
}