import { VRAMArea } from "../vram-components.slint";
import { Button, ComboBox, GroupBox, StandardListView } from "std-widgets.slint";

export component MainTab inherits Rectangle {
    width:  group.width  + group.x*2;
    height: group.height + group.y*2 + 32px;

    group := GroupBox {
        title: "VRAM Layout";
        x: 4px;
        y: 4px;
        
        VerticalLayout {
            background_rect := Rectangle {
                width:  background_image.width + 8px;
                height: background_image.height + 8px;
                border-width: 4px;
                border-color: #404040;
                background: #A0A0A0;
                background_image := VRAMArea {
                    x: 4px;
                    y: 4px;
                    img: @image-url("../../../../../examples/PoolBox/assets/AllTheJaby.png");
                    img_x: 0;
                    img_y: 0;
                }
                // Extend these from input some how
                /*VRAMArea {
                    x: 4px;
                    y: 4px;
                    img: @image-url("../../../../examples/PoolBox/assets/IMG_6921.png");
                    img_x: 80;
                    img_y: 80;
                }*/
            }
            HorizontalLayout {
                padding: 4px;
                GroupBox {
                    title: "Added Files";
                    VerticalLayout {
                        alignment: start;
                        padding: 4px;
                        StandardListView {
                            width: background_image.width/2;
                            height: 128px;
                            model: [ { text: "Blue"}, { text: "Red" }, { text: "Green" },
                                { text: "Yellow" }, { text: "Black"}, { text: "White"},
                                { text: "Magenta" }, { text: "Cyan" },
                            ];
                        }
                        HorizontalLayout {
                            padding: 4px;
                            Button {
                                text: "Add File";
                            }
                            Button {
                                text: "Remove File";
                            }
                        }
                    }
                }
                GroupBox {
                    title: "Current File";
                    VerticalLayout {
                        padding: 4px;
                        Rectangle {
                            width:  128px;
                            height: 128px;
                            background: #A0A0A0;
                        }
                        ComboBox {
                            model: ["4-bit", "16-bit", "24-bit"];
                            current-value: "4-bit";
                        }
                    }
                }
            }
        }
    }
}