/******************************************************************************
**
** Copyright (C) 2023 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Quick Ultralite 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 http://www.qt.io/terms-conditions. For further
** information use the contact form at http://www.qt.io/contact-us.
**
** $QT_END_LICENSE$
**
******************************************************************************/
import QtQuick 2.15

Rectangle {
    color: "#00414A"
    Text {
        id: speedometer
        color: "#2CDE85"
        anchors.centerIn: parent

        font.weight: Font.DemiBold
        font.pixelSize: 90
        text: VehicleStatus.speed
    }
    Text {
        color: "#28C878"
        anchors.horizontalCenter: speedometer.horizontalCenter
        anchors.bottom: speedometer.top
        anchors.bottomMargin: -36

        font.weight: Font.Light
        font.pixelSize: 22
        text: "km/h"
    }
    Text {
        id: leftBlinker
        opacity: 0.0
        color: "#2CDE85"
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.topMargin: 20
        anchors.leftMargin: 40
        font.weight: Font.DemiBold
        font.pixelSize: 60
        text: "⇦"

        Behavior on opacity { NumberAnimation { duration: 500; easing.type: Easing.InCubic } }
    }
    Text {
        id: rightBlinker
        opacity: 0.0
        color: "#2CDE85"
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.topMargin: 20
        anchors.rightMargin: 40
        font.weight: Font.DemiBold
        font.pixelSize: 60
        text: "⇨"

        Behavior on opacity { NumberAnimation { duration: 500; easing.type: Easing.InCubic } }
    }
    Text {
        id: tripMeter
        color: "#2CDE85"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 5

        font.weight: Font.DemiBold
        font.pixelSize: 24
        text: VehicleStatus.tripMeter.toFixed(1) + " km"
    }
    Text {
        color: "#28C878"
        anchors.horizontalCenter: speedometer.horizontalCenter
        anchors.bottom: tripMeter.top
        anchors.bottomMargin: -6

        font.weight: Font.Light
        font.pixelSize: 22
        text: "Trip"
    }

    VehicleStatus.onLeftBlinkerStateChange: {
        leftBlinker.opacity = leftBlinkerState ? 1.0 : 0.0
    }
    VehicleStatus.onRightBlinkerStateChange: {
        rightBlinker.opacity = rightBlinkerState ? 1.0 : 0.0
    }
}