// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { DemoPalette, Page, SpinBox, Label, ComboBox, PushButton, CheckBox } from "./common.slint";
import { StandardListView } from "std-widgets.slint";
import { PrinterQueue } from "./printer_queue.slint";

struct File  { name: string, preview: image }

export component UsbPage inherits Page {
    in property <[File]> files: [
        { name: ".." },
        { name: "cat.jpg", preview: @image-url("images/cat.jpg") },
        { name: "dog.jpg", preview: @image-url("images/dog.jpg") },
        { name: "elephant.jpg",preview: @image-url("images/elephant.jpg") },
        { name: "snake.jpg", preview: @image-url("images/snake.jpg") },
    ];

    has-back-button: true;
    header: @tr("USB");

    GridLayout {
        padding-top: 46px /* header line height in design */
                     + /* extra top-padding in design */ 27px;
        spacing: 24px;

        Rectangle {
            width: 50%;
            rowspan: 5;
            border-radius: 30px;
            clip: true;
            Image {
                height: 100%;
                width: 100%;
                source: root.files[list-view.current-item].preview;
                image-fit: cover;
            }

        }

        Label {
            col: 1;
            row: 0;
            text: @tr("Select File:");
            vertical-stretch: 0;
            max-height: 32px;
        }

        list-view := StandardListView {
            current-item: 1;
            col: 1;
            row: 1;
            colspan: 2;
            horizontal-stretch: 1;
            vertical-stretch: 1;
            // TODO: maybe we want something like `model: files.map(item => { text: item.preview })`
            model: [
                { text: ".." },
                { text: "cat.jpg" },
                { text: "dog.jpg" },
                { text: "elephant.jpg" },
                { text: "snake.jpg" },
            ];
        }

        Row {
            Label { col: 1; text: @tr("Copies"); }
            SpinBox {
                value: 1;
                minimum: 1;
            }
        }

        Row {
            Label { col: 1; text: @tr("Color"); }
            ComboBox {
                value: @tr("Grayscale");
                choices: [@tr("Grayscale"), @tr("Color")];
            }
        }

        HorizontalLayout {
            row: 4;
            col: 1;
            colspan: 2;

            Rectangle {
                horizontal-stretch: 0;
                width: 10%;
            }
            PushButton {
                icon: @image-url("images/print.svg");
                text: @tr("Start printing");
                clicked => {
                    PrinterQueue.start-job(root.files[list-view.current-item].name);
                }
            }
            Rectangle {
                horizontal-stretch: 0;
                width: 10%;
            }
        }
    }
}