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

Item {
    id: root
    width: 717
    property int rpm: 10000
    property int rpmAnimationTime: 1000
    Behavior on rpm {
        NumberAnimation {
            duration: rpmAnimationTime
        }
    }

    readonly property int changeOpacityAnimationDuration: 250
    readonly property int changeColorAnimationDuration: 1000
    property bool isDayMode: false
    property color normalColor: root.isDayMode ? Style.tachoElementDayMode : Style.tachoElementNightMode
    property color redColor: root.isDayMode ? Style.tachoElementRedDayMode : Style.tachoElementRedNightMode

    Behavior on normalColor {
        NumberAnimation {
            duration: 1000
        }
    }

    Behavior on redColor {
        NumberAnimation {
            duration: 1000
        }
    }

    readonly property list tachoPositions: [
        Qt.point(0, 60),
        Qt.point(37, 42),
        Qt.point(77, 24),
        Qt.point(117, 9),
        Qt.point(157, 2),
        Qt.point(204, 0),
        Qt.point(251, 0),
        Qt.point(298, 0),
        Qt.point(345, 0),
        Qt.point(392, 0),
        Qt.point(439, 0),
        Qt.point(486, 2),
        Qt.point(533, 9),
        Qt.point(573, 24),
        Qt.point(613, 42),
        Qt.point(653, 60)
    ]

    readonly property list tachoPositionsDayMode: [
        Qt.point(17, 74),
        Qt.point(54, 56),
        Qt.point(94, 38),
        Qt.point(134, 22),
        Qt.point(174, 17),
        Qt.point(221, 16),
        Qt.point(268, 16),
        Qt.point(315, 16),
        Qt.point(362, 16),
        Qt.point(409, 16),
        Qt.point(456, 16),
        Qt.point(503, 17),
        Qt.point(549, 23),
        Qt.point(590, 39),
        Qt.point(630, 57),
        Qt.point(670, 75)
    ]

    // 16 image elements
    readonly property list images: [
        "qrc:///images/tacho/1.png",
        "qrc:///images/tacho/2.png",
        "qrc:///images/tacho/3.png",
        "qrc:///images/tacho/4.png",
        "qrc:///images/tacho/5.png",
        "qrc:///images/tacho/6.png",
        "qrc:///images/tacho/6.png",
        "qrc:///images/tacho/6.png",
        "qrc:///images/tacho/6.png",
        "qrc:///images/tacho/6.png",
        "qrc:///images/tacho/6.png",
        "qrc:///images/tacho/5.png",
        "qrc:///images/tacho/4.png",
        "qrc:///images/tacho/3.png",
        "qrc:///images/tacho/2.png",
        "qrc:///images/tacho/1.png"
    ]

    readonly property list imagesDayMode: [
        "qrc:///images/tacho/light/01.png",
        "qrc:///images/tacho/light/02.png",
        "qrc:///images/tacho/light/03.png",
        "qrc:///images/tacho/light/04.png",
        "qrc:///images/tacho/light/05.png",
        "qrc:///images/tacho/light/06.png",
        "qrc:///images/tacho/light/06.png",
        "qrc:///images/tacho/light/06.png",
        "qrc:///images/tacho/light/06.png",
        "qrc:///images/tacho/light/06.png",
        "qrc:///images/tacho/light/06.png",
        "qrc:///images/tacho/light/05.png",
        "qrc:///images/tacho/light/04.png",
        "qrc:///images/tacho/light/03.png",
        "qrc:///images/tacho/light/02.png",
        "qrc:///images/tacho/light/01.png"
    ]

    Repeater {
        id: tachoImages
        model: root.tachoPositions.length

        ColorizedImage {
            id: img
            source: root.isDayMode ? root.imagesDayMode[index] :   root.images[index]
            y: root.isDayMode ? root.tachoPositionsDayMode[index].y : root.tachoPositions[index].y
            x: root.isDayMode ? root.tachoPositionsDayMode[index].x : root.tachoPositions[index].x
            opacity: index * 1000 < root.rpm ? 1 : 0
            color: index >= 13 ? root.redColor : root.normalColor

            transform: Scale {
                xScale: index > 8 ? -1 : 1
                origin.x: img.implicitWidth / 2
            }
            Behavior on opacity {
                NumberAnimation {
                    duration: changeOpacityAnimationDuration
                }
            }
            Behavior on color {
                NumberAnimation {
                    duration: changeColorAnimationDuration
                }
            }
        }
    }
}