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

import { DemoPalette, Page, SpinBox, ComboBox, CheckBox, Label } from "common.slint";

export component SettingsPage inherits Page {
    header: "Settings";

    GridLayout {
        padding-top: 23px /* header line height in design */
                     + /* extra top-padding in design */ 13px;
        spacing: 5px;
        Row {
            Text {
                text: "Defaults";
                color: DemoPalette.secondary-foreground-color;
                font-size: DemoPalette.base-font-size * 1.125;
                font-weight: 800;
                colspan: 2;
                horizontal-stretch: 2;
            }
            Rectangle {}
            Text {
                col: 3;
                colspan: 2;
                text: "General";
                color: DemoPalette.secondary-foreground-color;
                font-size: DemoPalette.base-font-size * 1.125;
                font-weight: 800;
            }
        }
        Row {
            Label { text: "Layout"; }
            ComboBox {
                value: "Portrait";
                choices: ["Portrait", "Landscape"];
                horizontal-stretch: 2;
            }
            Rectangle {}
            Label {
                text: "EcoMode";
                TouchArea { clicked => { cb1.checked = !cb1.checked; } }
            }
            cb1 := CheckBox { checked: false; }
        }
        Row {
            Label { text: "Quality"; }
            ComboBox {
                value: "Best";
                choices: ["Best", "Medium", "Draft"];
                horizontal-stretch: 2;
            }
            Rectangle {}
            Label {
                text: "TURBO ";
                TouchArea { clicked => { cb2.checked = !cb2.checked; } }
            }
            cb2 := CheckBox { checked: true; }
        }
        Row {
            Label { text: "Color"; }
            ComboBox {
                value: "Grayscale";
                choices: ["Grayscale", "Color"];
                horizontal-stretch: 2;
            }
        }

        Rectangle {}

    }
    Image {
        source: DemoPalette.night-mode ? @image-url("slint-logo-square-dark-80x80.png") : @image-url("slint-logo-square-light-80x80.png");
        width: 80px;
        height: 80px;
        x: parent.width - self.width;
        y: parent.height - self.height;
    }
}