// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial

// This file is part of the Qt Safe Renderer module
import QtQuick
import QtQuick.Window
import Qt.SafeRenderer
import QtQuick.Controls
import QtQml.Models

Window {
    visible: true
    width: 250
    height: 325
    title: qsTr("Control UI")
    id: root
    color: "#f3f3f4"

    Column {
        x: 140
        width: 30
        height: 300

        Row {

            Switch {
                id: mySwitchBattery
                checked: true
                onCheckedChanged: {
                    QSafeMessageSender.changeState("iconBattery", checked?"ON":"OFF")
                }
            }

            SafePicture {
                id: iconBattery
                objectName: "iconBattery"
                width: 30
                height: 30
                color: "#e41e25"
                fillColor: "black"
                source: "qrc:/iso-icons/iso_grs_7000_4_0247.dat"
            }
        }

        Row {

            Switch {
                id: mySwitchFuel
                checked: true
                onCheckedChanged: {
                    QSafeMessageSender.changeState("iconFuel", checked?"ON":"OFF")
                }
            }

            SafePicture {
                id: iconFuel
                width: 30
                height: 30
                color: "#e41e25"
                fillColor: "black"
                source: "qrc:/iso-icons/iso_grs_7000_4_0245.dat"
            }
        }

        Row {

            Switch {
                id: mySwitchParkingBrake
                checked: true
                onCheckedChanged: {
                    QSafeMessageSender.changeState("iconParkingBrake", checked?"ON":"OFF")
                }
            }

            SafePicture {
                id: iconParkingBrake
                objectName: "iconParkingBrake"
                width: 30
                height: 30
                color: "#e41e25"
                fillColor: "black"
                source: "qrc:/iso-icons/iso_grs_7000_4_0238.dat"
            }
        }

        Row {

            Switch {
                id: mySwitchLowbeam
                checked: true
                onCheckedChanged: {
                    QSafeMessageSender.changeState("iconLowbeam", checked?"ON":"OFF")
                }
            }

            SafePicture {
                id: iconLowbeam
                objectName: "iconLowbeam"
                width: 30
                height: 30
                source: "qrc:/iso-icons/iso_grs_7000_4_0456.dat"
                color: "#5caa15"
                fillColor: "black"
            }
        }

        Row {

            Switch {
                id: mySwitchTyre
                checked: true
                onCheckedChanged: {
                    QSafeMessageSender.changeState("iconTyre", checked?"ON":"OFF")
                }
            }

            SafePicture {
                id: iconTyre
                objectName: "iconTyre"
                width: 30
                height: 30
                color: "#face20"
                fillColor: "black"
                source: "qrc:/iso-icons/iso_grs_7000_4_1434A.dat"
            }
        }

        Row {

            Switch {
                id: mySwitchLamp
                checked: true
                onCheckedChanged: {
                    QSafeMessageSender.changeState("iconLamp", checked?"ON":"OFF")
                }
            }

            SafePicture {
                id: iconLamp
                objectName: "iconLamp"
                width: 30
                height: 30
                source: "qrc:/iso-icons/iso_grs_7000_4_1555.dat"
                color: "#face20"
                fillColor: "black"
            }
        }

        Row {

            Switch {
                id: mySwitchSeatbelt
                checked: true
                onCheckedChanged: {
                    QSafeMessageSender.changeState("iconSeatbelt", checked?"ON":"OFF")
                }
            }

            SafePicture {
                id: iconSeatbelt
                objectName: "iconSeatbelt"
                width: 30
                height: 30
                color: "#e41e25"
                fillColor: "black"
                source: "qrc:/iso-icons/iso_grs_7000_4_0249.dat"
            }
        }
    }

    ButtonGroup {
        buttons: column.children
    }

    Column {
        id: column

        RadioButton {
            checked: true
            text: qsTr("R")
            onClicked: QSafeMessageSender.changeState("root","reverse")
        }

        RadioButton {
            text: qsTr("N")
            onClicked: QSafeMessageSender.changeState("root","neutral")
        }

        RadioButton {
            text: qsTr("D")
            onClicked: QSafeMessageSender.changeState("root","drive")
        }

        RadioButton {
            text: qsTr("P")
            onClicked: QSafeMessageSender.changeState("root","park")
        }
    }

    Label {
        width: slider.width
        wrapMode: Label.Wrap
        horizontalAlignment: Qt.AlignHCenter
        y: 275
        x: 25
        text: "Change the speed."
    }

    Slider {
        id: slider
        from: 0
        to: 300
        stepSize: 1
        value: 0
        y: 285
        x: 20

        background: Rectangle {
            x: slider.leftPadding
            y: slider.topPadding + slider.availableHeight / 2 - height / 2
            implicitWidth: 200
            implicitHeight: 4
            width: slider.availableWidth
            height: implicitHeight
            radius: 2
            color: "#cecfd5"

            Rectangle {
                width: slider.visualPosition * parent.width
                height: parent.height
                color: "#41cd52"
                radius: 2
            }
        }

        handle: Rectangle {
            x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
            y: slider.topPadding + slider.availableHeight / 2 - height / 2
            implicitWidth: 26
            implicitHeight: 26
            radius: 13
            color: slider.pressed ? "#f0f0f0" : "#f6f6f6"
            border.color: "#cecfd5"
        }

        onValueChanged: {
            if (slider.value >= 1 && slider.value <= 299) {
                QSafeMessageSender.setText("safetextitem", slider.value + stepSize)
            } else {
                QSafeMessageSender.setText("safetextitem", slider.value)
            }
        }
    }
}