/******************************************************************************
**
** Copyright (C) 2020 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

Rectangle {
    id: root
    width: 800
    height: 480

    color: Style.gray

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

    ItemWithAcivationAnimations {
        id: allElementsExceptKeyboard
        width: 800
        height: 480
        welcomeAnimationDelay: 500
        active: !MainModel.showKeyboard

        Logo {
            active: MainModel.logoAnimationStart
            anchors.centerIn: parent
            anchors.verticalCenterOffset: 20
        }

        Item {
            id: wholeTacho
            width: 800
            height: 160
            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: 32
                rpm: MainModel.rpm
                rpmAnimationTime: MainModel.rpmAnimationTime
                isDayMode: MainModel.isDayMode
            }

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

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

            ClipingItem {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 118
                dayModeSource: "qrc:///images/small/mainScreen/tacho-bottom-line-day.png"
                nightModeSource: "qrc:///images/small/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: 27
            anchors.rightMargin: 33
            dayModeSource: "qrc:///images/small/mainScreen/left-lines-day.png"
            nightModeSource: "qrc:///images/small/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: 27
            anchors.leftMargin: 50
            dayModeSource: "qrc:///images/small/mainScreen/right-lines-day.png"
            nightModeSource: "qrc:///images/small/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: 130
            active: MainModel.bgRoadActive
            isDayMode: MainModel.isDayMode
        }

        Navigation {
            id: navi
            anchors.bottom: bottomCommonElements.top
            anchors.bottomMargin: 6
            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: 20

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

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

        Blinker {
            id: rightBlinker
            y: 52
            anchors.right: parent.right
            anchors.rightMargin: 10
            blinking: MainModel.rightTurnSignal

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

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

            fuelLevel: MainModel.fuelLevel
        }

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

            rpm: MainModel.rpm
            gear: MainModel.gear
        }

        RangeIconWithText {
            id: rangeIndicator
            active: MainModel.rangeVisible && !MainModel.showStatistics
            isDayMode: MainModel.isDayMode
            x: 131
            anchors.top: fuelGauge.bottom
            anchors.topMargin: 11
            anchors.left: fuelGauge.left
            anchors.leftMargin: -8

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

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

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

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

        Warning {
            id: warning
            anchors.top: parent.top
            anchors.topMargin: 10
            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/small/bg/ref_day.png"
//        opacity: 0.2
//    }

    PerformanceMetrics {
        anchors.margins: 4
        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
    }
}