import { Theme } from "../theme.slint";

export struct ListItemEntry {
    text: string,
    secondary: string,
    icon: string,
    disabled: bool,
}

export struct RowEntry {
    cells: [string],
}

export component NeonListItem {
    in property <string> text;
    in property <string> secondary: "";
    in property <string> icon: "";
    in property <bool> selected: false;
    in property <bool> has-chevron: false;
    in property <bool> disabled: false;
    callback clicked;

    min-height: 44px;

    Rectangle {
        background: root.selected ? Theme.bg-selected : (touch.has-hover ? Theme.bg-hover : transparent);
        border-radius: Theme.radius-md;
        HorizontalLayout { padding-left: Theme.sp-3; padding-right: Theme.sp-3;
            spacing: Theme.sp-3; alignment: start;
            if (root.icon != "") : Text { text: root.icon; font-size: Theme.font-lg; color: root.selected ? Theme.neon-cyan : Theme.text-muted; min-width: 24px; vertical-alignment: center; }
            VerticalLayout { spacing: 2px;
                Text { text: root.text; font-size: Theme.font-base; font-weight: root.selected ? 600 : 400; color: root.selected ? Theme.neon-cyan : Theme.text-primary; opacity: root.disabled ? 0.4 : 1.0; overflow: elide; horizontal-stretch: 1; }
                if (root.secondary != "") : Text { text: root.secondary; font-size: Theme.font-sm; color: Theme.text-dim; overflow: elide; horizontal-stretch: 1; }
            }
            Rectangle { horizontal-stretch: 1; }
            if (root.has-chevron) : Text { text: "›"; font-size: Theme.font-xl; color: Theme.text-dim; vertical-alignment: center; }
        }
    }
    touch := TouchArea { enabled: !root.disabled; clicked => { root.clicked(); } mouse-cursor: MouseCursor.pointer; }
}

export component NeonListGroup {
    in property <[ListItemEntry]> items;
    in-out property <int> selected-index: -1;
    callback item-clicked(int);

    VerticalLayout { spacing: 2px;
        for item[idx] in root.items : NeonListItem {
            text: item.text; secondary: item.secondary; icon: item.icon;
            selected: idx == root.selected-index; disabled: item.disabled;
            clicked => { root.selected-index = idx; root.item-clicked(idx); }
        }
    }
}

export component NeonDataTable {
    in property <[string]> columns;
    in property <[RowEntry]> rows;
    in-out property <int> selected-row: -1;
    in property <int> sort-column: -1;
    in property <bool> sort-asc: true;
    callback header-clicked(int);
    callback row-clicked(int);

    VerticalLayout { spacing: 0;
        // Header
        HorizontalLayout { spacing: 0;
            for col[idx] in root.columns : Rectangle {
                min-height: 36px; horizontal-stretch: 1;
                Rectangle { background: Theme.bg-elevated;
                    Rectangle { height: 1px; background: Theme.border; y: parent.height - 1px; }
                    HorizontalLayout { padding-left: Theme.sp-2; padding-right: Theme.sp-2; spacing: Theme.sp-1; alignment: start;
                        Text { text: col; font-size: Theme.font-sm; font-weight: 600; color: Theme.text-primary; overflow: elide; vertical-alignment: center; }
                        if (idx == root.sort-column) : Text { text: root.sort-asc ? "▲" : "▼"; font-size: 10px; color: Theme.neon-cyan; vertical-alignment: center; }
                    }
                }
                TouchArea { clicked => { root.header-clicked(idx); } mouse-cursor: MouseCursor.pointer; }
            }
        }
        // Rows
        VerticalLayout { spacing: 0;
            for data[row_idx] in root.rows : Rectangle {
                min-height: 36px; horizontal-stretch: 1;
                Rectangle {
                    background: row_idx == root.selected-row ? Theme.bg-selected : (Math.mod(row_idx, 2) == 0 ? transparent : Theme.bg-row-alt);
                    Rectangle { height: 1px; background: Theme.border; y: parent.height - 1px; }
                    HorizontalLayout { spacing: 0;
                        for cell in data.cells : Rectangle { horizontal-stretch: 1;
                            HorizontalLayout { padding-left: Theme.sp-2; padding-right: Theme.sp-2;
                                Text { text: cell; font-size: Theme.font-sm; color: row_idx == root.selected-row ? Theme.neon-cyan : Theme.text-primary; overflow: elide; vertical-alignment: center; }
                            }
                        }
                    }
                }
                TouchArea { clicked => { root.selected-row = row_idx; root.row-clicked(row_idx); } mouse-cursor: MouseCursor.pointer; }
            }
        }
    }
}
