// 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 Qt.SafeRenderer

Rectangle {
    id: root
    width: 640
    height: 480
    color: "black"
    property alias text: safeText.text

    LeftIndicators {
        id: leftindicators
    }

    RightIndicators {
        id: rightIndicators
    }

    SafeText {
        id: safeText
        objectName: "safetextitem"
        x: 236
        y: 163
        width: 65
        height: 34
        color: "#8ae234"
        fillColor: "#000000"
        text: "0"
        horizontalAlignment: Text.AlignRight
        verticalAlignment: Text.AlignBottom
        font.family: "Lato"
        font.pixelSize: 32
        runtimeEditable: true
    }

    SafeText {
        id: safeUnitText
        objectName: "safeunittextitem"
        x: 300
        y: 163
        width: 81
        height: 34
        color: "#8ae234"
        fillColor: "#000000"
        text: "km/h"
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignBottom
        font.family: "Lato"
        font.pixelSize: 32
        runtimeEditable: false
    }

    SafeImage {
        id: park
        objectName: "park"
        x: 176
        y: 318
        width: 40
        height: 50
        source: "parking.png"
        fillColor: "#000000"
    }

    SafeImage {
        id: neutral
        objectName: "neutral"
        x: 400
        y: 318
        width: 40
        height: 50
        source: "neutral.png"
        fillColor: "#000000"
    }

    SafeImage {
        id: reverse
        objectName: "reverse"
        x: 286
        y: 208
        width: 40
        height: 50
        source: "reverse.png"
        fillColor: "#000000"
    }

    SafeImage {
        id: drive
        objectName: "drive"
        x: 286
        y: 428
        width: 40
        height: 50
        source: "drive.png"
        fillColor: "#000000"
    }

    states: [
        State {
            name: "park"
            PropertyChanges {
                target: park
                x: 276
                y: 313
                width: 60
                height: 60
            }
        },
        State {
            name: "neutral"
            PropertyChanges {
                target: neutral
                x: 276
                y: 313
                width: 60
                height: 60
            }
        },
        State {
            name: "reverse"
            PropertyChanges {
                target: reverse
                x: 276
                y: 313
                width: 60
                height: 60
            }
        },
        State {
            name: "drive"
            PropertyChanges {
                target: drive
                x: 276
                y: 313
                width: 60
                height: 60
            }
        }
    ]
    transitions: [
        Transition {
            from: "*"
            to: "*"
            NumberAnimation {
                properties: "x,y,width,height"
                duration: 500
                easing.type: Easing.InOutQuad
            }
        }
    ]
}