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

import { DemoPalette, Page, PushButton } from "./common.slint";
import { CopyPage } from "./copy_page.slint";
import { ScanPage } from "./scan_page.slint";
import { PrintPage } from "./print_page.slint";
import { PrinterQueueView } from "./printer_queue.slint";
import { UsbPage } from "./usb_page.slint";



enum SubPage { None, Print, Scan, Copy, Usb }

component ActionButton inherits Rectangle {
    in property <image> icon <=> img.source;
    in property <string> text <=> label.text;
    width: DemoPalette.button-width;
    height: DemoPalette.button-height;

    callback clicked;

    VerticalLayout {
        spacing: 10px;

        Rectangle {
            border-radius: 25px;
            border-width: 5px;
            border-color: DemoPalette.secondary;
            background: DemoPalette.dark-mode ? DemoPalette.primary : DemoPalette.background;
            width: DemoPalette.button-width;
            height: self.width;

            img := Image {
                colorize: DemoPalette.text-primary;
            }
        }

        label := Text {
            font-size: DemoPalette.base-font-size * 1.375;
            font-weight: 800;
            horizontal-alignment: center;
            color: DemoPalette.text-primary;
        }
    }

    TouchArea { clicked => { root.clicked() } }
}

export component HomePage inherits Page {
    in-out property <length> header-row-height: 40px;
    in-out property <length> button-spacing: 35px;
    in-out property <SubPage> current-subpage: SubPage.None;

    header: @tr("Slint Printer Demo");

    for action[idx] in [
        { name: @tr("Print"), id: SubPage.Print, icon: @image-url("images/print.svg") },
        { name: @tr("Scan"), id: SubPage.Scan, icon: @image-url("images/scan.svg") },
        { name: @tr("Copy"), id: SubPage.Copy, icon: @image-url("images/copy.svg") },
        { name: @tr("USB"), id: SubPage.Usb, icon: @image-url("images/usb.svg") },
    ]: ActionButton {
        x: mod(idx, 2) * (DemoPalette.button-width + root.button-spacing);
        y: floor(idx / 2) * (DemoPalette.button-height + root.button-spacing)
            + /* header row height */ 46px
            + /* top-padding of printer queue */ 27px;
        icon: action.icon;
        text: action.name;

        clicked => { root.current-subpage = action.id; }
    }

    queue-view := PrinterQueueView {
        show-job-details(idx) => {
            root.current-subpage = SubPage.Print;
        }

        x: parent.width - self.width;
        width: 313px;
    }

    PrintPage {
        back => { root.current-subpage = SubPage.None; }
        x: root.current-subpage == SubPage.Print ? 0 : parent.width + parent.x + 2px;
        animate x { duration: 125ms; easing: ease; }
    }

    ScanPage {
        back => { root.current-subpage = SubPage.None; }
        x: root.current-subpage == SubPage.Scan ? 0 : parent.width + parent.x + 2px;
        animate x { duration: 125ms; easing: ease; }
    }

    CopyPage {
        back => { root.current-subpage = SubPage.None; }
        x: root.current-subpage == SubPage.Copy ? 0 : parent.width + parent.x + 2px;
        animate x { duration: 125ms; easing: ease; }
    }

    UsbPage {
        back => { root.current-subpage = SubPage.None; }
        x: root.current-subpage == SubPage.Usb ? 0 : parent.width + parent.x + 2px;
        animate x { duration: 125ms; easing: ease; }
    }
}