/******************************************************************************
**
** 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 2.15

Rectangle {
    id: root
    width: 720
    height: 1280

    color: Style.gray

    Image
    {
        id: cluster
        anchors.fill: parent
        z: 0

        source: "images/bg/main.png"
    }

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

    TachoView {
        id: tacho
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.leftMargin: 64
        anchors.verticalCenterOffset: 20
        rpm: MainModel.rpm
        rpmAnimationTime: MainModel.rpmAnimationTime
    }

    NumberedScaleView{
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.leftMargin: 28
        active: MainModel.tachoScaleActive
    }

    ClipingItem
    {
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.leftMargin: 83
        source: "images/welcome/tacho-top-line.png"
        active: MainModel.tachoUpperFrameActive
        verticalClipping: true
    }

    ClipingItem
    {
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.leftMargin: 203
        source: "images/welcome/tacho-bottom-line.png"
        verticalClipping: true
        verticalDirection: ClipingItem.Down
        active: MainModel.tachoBottomFrameActive
    }

    RoadView {
        id: road
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.verticalCenter: parent.verticalCenter
        active: MainModel.bgRoadActive
    }

    ClipingItem
    {
        id: leftLines
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        anchors.verticalCenterOffset: 265
        source: "images/welcome/left-lines.png"
        horizontalDirection: ClipingItem.Left
        verticalDirection: ClipingItem.Up
        active: MainModel.bgLinesLeftActive
        horizontalClipping: true
        verticalClipping: true
    }

    ClipingItem
    {
        id: rightLines
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        anchors.verticalCenterOffset: -280
        source: "images/welcome/right-lines.png"
        horizontalDirection: ClipingItem.Left
        verticalDirection: ClipingItem.Down
        active: MainModel.bgLinesRightActive
        horizontalClipping: true
        verticalClipping: true
    }

    Blinker
    {
        id: rightBlinker
        anchors.top: parent.top
        anchors.topMargin: 12
        anchors.left: parent.left
        anchors.leftMargin: 26
        blinking: MainModel.rightTurnSignal
        sourceTop: "images/turn-right-top.png"
        sourceBottom: "images/turn-right-bottom.png"
    }

    Blinker
    {
        id: leftBlinker
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 12
        anchors.left: parent.left
        anchors.leftMargin: 26
        blinking: MainModel.leftTurnSignal
        sourceTop: "images/turn-left-top.png"
        sourceBottom: "images/turn-left-bottom.png"
        isLeftBlinker: true
    }

    FuelGaugeView
    {
        id: fuelGauge
        active: MainModel.roundGaugesVisible

        anchors.verticalCenter: root.verticalCenter
        anchors.verticalCenterOffset: 333
        anchors.horizontalCenter: root.horizontalCenter
        anchors.horizontalCenterOffset: 4

        fuelLevel: MainModel.fuelLevel
    }

    GearGaugeView
    {
        id: gearGauge
        active: MainModel.roundGaugesVisible

        anchors.verticalCenter: root.verticalCenter
        anchors.verticalCenterOffset: -333
        anchors.horizontalCenter: root.horizontalCenter
        anchors.horizontalCenterOffset: 4

        rpm: MainModel.rpm
        isOver13kRpm: MainModel.isOver13kRpm
        gear: MainModel.gear
    }

    RangeIconWithText
    {
        id: rangeIndicator
        active: MainModel.rangeVisible
        anchors.left: fuelGauge.right
        anchors.leftMargin: 28
        anchors.bottom: fuelGauge.bottom
        anchors.bottomMargin: 77

        value: (MainModel.fuelLevel * 3)
    }

    SpeedoView {
        id: speedoGauge
        anchors.centerIn: parent
        anchors.horizontalCenterOffset: -22
        anchors.verticalCenterOffset: -6
        speedValue: MainModel.speedValue
        active: MainModel.speedometerVisible
    }

    BottomCommonElements
    {
        id: bottomCommonElements
        anchors.verticalCenter: root.verticalCenter
        anchors.right: root.right
        anchors.rightMargin: 30

        active: MainModel.bottomElementsVisible
        tripValue: MainModel.tripValue
        odoValue: MainModel.odoValue
        tempValue: MainModel.tempValue
    }

    TellTalesView {
        id: telltales
        active: MainModel.telltalesVisible
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 82
        engineFailureActive: TellTalesModel.engineFailure
        batteryFailureActive: TellTalesModel.battery
        highBeamActive: TellTalesModel.highBeamsActive
        engineOilActive: TellTalesModel.engineOil
    }

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