/****************************************************************************
**
** Copyright (C) 2022 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Safe Renderer module
**
** $QT_BEGIN_LICENSE:COMM$
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** $QT_END_LICENSE$
**
**
**
**
**
**
**
**
****************************************************************************/
import QtQuick 2.0
import QtQuick.Window 2.0
import Qt.SafeRenderer 2.0
import QtQuick.Controls 2.15
import QtQml.Models 2.12

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: {
                    SafeMessage.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: {
                    SafeMessage.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: {
                    SafeMessage.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: {
                    SafeMessage.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: {
                    SafeMessage.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: {
                    SafeMessage.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: {
                    SafeMessage.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: SafeMessage.changeState("root","reverse")
        }

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

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

        RadioButton {
            text: qsTr("P")
            onClicked: SafeMessage.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:{
            SafeMessage.setText("safetextitem", slider.value + stepSize)
            }
        }
    }