// Copyright (C) 2025 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: "#ffffff"
    border.color: "#ffffff"
    state: "park"
    property alias text: safeText.text

    LeftIndicators {
        id: leftIndicators
        anchors.left: parent.left
        anchors.leftMargin: 48
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 22
    }
    RightIndicators {
        id: rightIndicators
        height: 36
        anchors.right: parent.right
        anchors.rightMargin: 48
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 22
    }

    SafeText {
        id: safeText
        objectName: "safetextitem"
        anchors.horizontalCenter: parent.horizontalCenter
        y: 48
        width: 160
        height: 80
        color: "#000000"
        fillColor: "#ffffff"
        text: "0"
        horizontalAlignment: SafeText.AlignHCenter
        verticalAlignment: SafeText.AlignBottom
        anchors.horizontalCenterOffset: 0
        font.family: "Lato"
        font.pixelSize: 72
        runtimeEditable: true
    }

    SafeText {
        id: safeUnitText
        objectName: "safeunittextitem"
        anchors.horizontalCenter: safeText.horizontalCenter
        anchors.top: safeText.bottom
        anchors.topMargin: 0
        width: 100
        height: 40
        color: "#000000"
        fillColor: "#ffffff"
        text: "km/h"
        horizontalAlignment: SafeText.AlignHCenter
        verticalAlignment: SafeText.AlignTop
        font.family: "Lato"
        font.pixelSize: 28
        runtimeEditable: false
    }

    SafeImage {
        id: infopanel
        objectName: "infopanel"
        anchors.centerIn: parent
        width: 226
        height: 110
        source: "images/rendering_failed.png"
        fillColor: "#ffffff"
    }

    Column {
        id: gearColumn
        spacing: 14
        anchors.right: parent.right
        anchors.rightMargin: 48
        anchors.verticalCenter: parent.verticalCenter

        SafeImage {
            id: park
            objectName: "park"
            width: 28
            height: 35
            source: "images/parking.png"
            fillColor: "#ffffff"
        }
        SafeImage {
            id: reverse
            objectName: "reverse"
            width: 28
            height: 35
            source: "images/reverse.png"
            fillColor: "#ffffff"
        }
        SafeImage {
            id: neutral
            objectName: "neutral"
            width: 28
            height: 35
            source: "images/neutral.png"
            fillColor: "#ffffff"
        }
        SafeImage {
            id: drive
            objectName: "drive"
            width: 28
            height: 35
            source: "images/drive.png"
            fillColor: "#ffffff"
        }
    }
    states: [
        State {
            name: "park"
            PropertyChanges {
                target: park
                width: 36
                height: 45
            }
        },
        State {
            name: "reverse"
            PropertyChanges {
                target: reverse
                width: 36
                height: 45
            }
        },
        State {
            name: "neutral"
            PropertyChanges {
                target: neutral
                width: 36
                height: 45
            }
        },
        State {
            name: "drive"
            PropertyChanges {
                target: drive
                width: 36
                height: 45
            }
        }
    ]

    transitions: [
        Transition {
            from: "*"
            to: "*"
            NumberAnimation {
                properties: "width,height"
                duration: 100
                easing.type: Easing.InOutQuad
            }
        }
    ]
}