// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { Palette, Measurements } from "../common.slint";
import { AppState } from "../appState.slint";

export component Control inherits Rectangle {
    in property <string> name;
    in property <string> id;
    in property <bool> type-label: true;
    in property <bool> name-label: true;
    in property <bool> full-screen: false;
    in property <bool> control-label: true;
    in property <length> control-label-position: 2.5px;
    in property <int> index;
    in property <length> tile-shadow-blur: Measurements.tile-shadow-blur;
    in property <brush> tile-background: Palette.control-background;
    in property <brush> tile-shadow-color: Palette.shadow-color;
    in property <bool> show-label: true;
    in property <image> control-background: @image-url("../images/control-frame.png", nine-slice(50));

    border-radius: 15px;

    if AppState.graphics-accelerator-available : Rectangle {
        Rectangle {
            border-radius: root.border-radius;
            background: @linear-gradient(1200deg, #191d44, #241433);
        }
        Rectangle {
            border-radius: root.border-radius;
            background: @linear-gradient(180deg, white.transparentize(85%) 0%, white.transparentize(93%) 60%, white.transparentize(90%) 92%, #ffffff.transparentize(75%) 100%);
        }
        Rectangle {
            border-radius: root.border-radius;
            border-width: 1px;
            border-color: Palette.glass-border;
        }
    }


    if !AppState.graphics-accelerator-available : Image {
        x: -14px;
        y: -12px;
        width: parent.width + 34px;
        height: parent.height + 32px;
        source: root.control-background;
    }
    TouchArea {
        clicked => {
            AppState.end-kiosk-mode();
        }
    }

    @children

}