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

Rectangle {
    id: root
    width: 1200
    height: 720

    color: Style.gray

    Background {
        id: cluster
        anchors.fill: parent
        isDayMode: MainModel.isDayMode
    }

    ItemWithAcivationAnimations {
        id: allElementsExceptKeyboard
        width: 1200
        height: 720
        welcomeAnimationDelay: 500
        active: !MainModel.showKeyboard

        Logo {
            id: qtLogo
            active: MainModel.logoAnimationStart
            anchors.centerIn: parent
            anchors.verticalCenterOffset: qtLogo.verticalOffset
        }

        Item {
            id: wholeTacho
            width: 1200
            height: 240
            opacity: (warning.isWarningVisible) ? 0.4 : 1
            Behavior on opacity { NumberAnimation { duration: 500 } }

            TachoView {
                id: tacho
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 48
                rpm: MainModel.rpm
                rpmAnimationTime: MainModel.rpmAnimationTime
                isDayMode: MainModel.isDayMode
            }

            NumberedScaleView {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 24
                active: MainModel.tachoScaleActive
                isDayMode: MainModel.isDayMode
            }

            ClipingItem {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 63
                dayModeSource: "qrc:///images/mainScreen/tacho-top-line-day.png"
                nightModeSource: "qrc:///images/mainScreen/tacho-top-line.png"
                horizontalClipping: true
                active: MainModel.tachoUpperFrameActive
                isDayMode: MainModel.isDayMode
            }

            ClipingItem {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 177
                dayModeSource: "qrc:///images/mainScreen/tacho-bottom-line-day.png"
                nightModeSource: "qrc:///images/mainScreen/tacho-bottom-line.png"
                horizontalDirection: ClipingItem.Left
                horizontalClipping: true
                active: MainModel.tachoBottomFrameActive
                isDayMode: MainModel.isDayMode
            }
        }

        ClipingItem {
            anchors.bottom: parent.bottom
            anchors.right: parent.horizontalCenter
            anchors.bottomMargin: 41
            anchors.rightMargin: 44
            dayModeSource: "qrc:///images/mainScreen/left-lines-day.png"
            nightModeSource: "qrc:///images/mainScreen/left-lines.png"
            horizontalDirection: ClipingItem.Right
            verticalDirection: ClipingItem.Up
            active: MainModel.bgLinesLeftActive
            horizontalClipping: true
            verticalClipping: true
            isDayMode: MainModel.isDayMode
        }

        ClipingItem {
            anchors.bottom: parent.bottom
            anchors.left: parent.horizontalCenter
            anchors.bottomMargin: 41
            anchors.leftMargin: 75
            dayModeSource: "qrc:///images/mainScreen/right-lines-day.png"
            nightModeSource: "qrc:///images/mainScreen/right-lines.png"
            horizontalDirection: ClipingItem.Left
            verticalDirection: ClipingItem.Up
            active: MainModel.bgLinesRightActive
            horizontalClipping: true
            verticalClipping: true
            isDayMode: MainModel.isDayMode
        }

        RoadView {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            anchors.verticalCenterOffset: 195
            active: MainModel.bgRoadActive
            isDayMode: MainModel.isDayMode
        }

        Navigation {
            id: navi
            anchors.bottom: bottomCommonElements.top
            anchors.bottomMargin: 9
            anchors.horizontalCenter: parent.horizontalCenter

            active: NavigationModel.naviState !== NavigationModel.Hidden
            naviState: NavigationModel.naviState
            arrowsState: NavigationModel.arrowsState
            isDayMode: MainModel.isDayMode

            distance: NavigationModel.distanceToTarget
        }

        Statistics {
            id: stats
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            anchors.verticalCenterOffset: 30

            active: MainModel.showStatistics
            isDayMode: MainModel.isDayMode
            tripDistance: MainModel.tripValue.toFixed(0) + " km"
        }

        Blinker {
            id: leftBlinker
            y: 78
            anchors.left: parent.left
            anchors.leftMargin: 15
            blinking: MainModel.leftTurnSignal
            source: "qrc:///images/turn-left.png"
        }

        Blinker {
            id: rightBlinker
            y: 78
            anchors.right: parent.right
            anchors.rightMargin: 15
            blinking: MainModel.rightTurnSignal

            source: "qrc:///images/turn-left.png"
            transform: Scale {
                xScale: -1
                origin.x: rightBlinker.implicitWidth / 2
            }
        }

        FuelGaugeView {
            id: fuelGauge
            active: MainModel.roundGaugesVisible && !MainModel.showStatistics
            isDayMode: MainModel.isDayMode
            y: 237
            anchors.left: parent.left
            anchors.leftMargin: 177

            fuelLevel: MainModel.fuelLevel
        }

        GearGaugeView {
            id: gearGauge
            active: MainModel.roundGaugesVisible && !MainModel.showStatistics
            isDayMode: MainModel.isDayMode
            y: 237
            anchors.right: parent.right
            anchors.rightMargin: 171

            rpm: MainModel.rpm
            gear: MainModel.gear
        }

        RangeIconWithText {
            id: rangeIndicator
            active: MainModel.rangeVisible && !MainModel.showStatistics
            isDayMode: MainModel.isDayMode
            x: 197
            anchors.top: fuelGauge.bottom
            anchors.topMargin: 17
            anchors.left: fuelGauge.left
            anchors.leftMargin: -12//-8

            valueText: (MainModel.fuelLevel * 3).toFixed(0)
        }

        SpeedoView {
            id: speedoGauge
            anchors.horizontalCenter: parent.horizontalCenter
            y: 228
            speedValue: MainModel.speedValue
            active: MainModel.speedometerVisible
            isDayMode: MainModel.isDayMode
        }

        BottomCommonElements
        {
            id: bottomCommonElements
            active: MainModel.bottomElementsVisible
            isDayMode: MainModel.isDayMode
            y: 620
            x: 275
            tripValue: MainModel.tripValue
            odoValue: MainModel.odoValue
            tempValue: MainModel.tempValue
        }

        TellTalesView {
            id: telltales
            active: MainModel.telltalesVisible
            anchors.horizontalCenter: parent.horizontalCenter
            y: 183
            engineFailureActive: TellTalesModel.engineFailure
            batteryFailureActive: TellTalesModel.battery
            highBeamActive: TellTalesModel.highBeamsActive
            engineOilActive: TellTalesModel.engineOil
            isDayMode: MainModel.isDayMode
        }

        Warning {
            id: warning
            anchors.top: parent.top
            anchors.topMargin: 15
            anchors.horizontalCenter: parent.horizontalCenter
            showWarning: TellTalesModel.engineFailure || TellTalesModel.battery || TellTalesModel.engineOil
            warningId: getWarningId()
        }
    }

    KeyboardView {
        active: MainModel.showKeyboard
        isDayMode: MainModel.isDayMode
    }

//    Image {
//        id: cluster_ref
//        anchors.fill: parent
//        z: 0
//        source: "qrc:///images/bg/ref_day.png"
//        opacity: 0.2
//    }

    PerformanceMetrics {
        anchors.margins: 6
        anchors.left: parent.left
        anchors.bottom: parent.bottom
    }

    function getWarningId() : int {
        if(TellTalesModel.engineFailure) {
            return 0
        }
        else if(TellTalesModel.engineOil) {
            return 1
        }
        else if(TellTalesModel.battery) {
            return 2
        }
        return 0
    }
}