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

Item {
    id: root
    clip: true
    width: 370
    height: 108
    property bool showWarning: false
    property bool isWarningVisible: warning.topMarginForAnimation === 0

    readonly property int warningTimeout: 3000

    property int warningId: 0

    readonly property list warningsImages: [
        "qrc:///images/warnings/engine-failure-warning.png",
        "qrc:///images/warnings/engine-oil-warning.png",
        "qrc:///images/warnings/battery-warning.png"
    ]

    readonly property list warningsTexts: [
        "Engine Malfunction\n         Stop Now!",
        "    Low Oil Pressure\nService immediately",
        "     Low Battery Charge\nDon't drive long distance"
    ]

    onShowWarningChanged: {
        if (showWarning) {
            hideWarningAnimation.stop()
            warningsAniamtion.stop()
            warningsAniamtion.start()
        }
    }

    onWarningIdChanged: {
        hideWarningAnimation.stop()
        warningsAniamtion.stop()
        if (showWarning) {
            warningsAniamtion.start()
        } else {
            hideWarningAnimation.start()
        }
    }

    SequentialAnimation {
        id: warningsAniamtion

        NumberAnimation {
            target: warning
            property: "topMarginForAnimation"
            to: 0
            duration: 330
            easing.type: Easing.OutCubic
        }
        PauseAnimation {
            duration: warningTimeout
        }
        NumberAnimation {
            target: warning
            property: "topMarginForAnimation"
            to: -height
            duration: 330
            easing.type: Easing.InCubic
        }
    }

    NumberAnimation {
        id: hideWarningAnimation
        target: warning
        property: "topMarginForAnimation"
        to: -height
        duration: 330
        easing.type: Easing.InCubic
    }

    Rectangle {
        id: warning

        width: 370
        height: 108

        anchors.top: root.top

        property int topMarginForAnimation: -height
        anchors.topMargin: topMarginForAnimation

        radius: 4
        color: Style.red

        Rectangle {
            id: iconRectangle

            width: 80
            height: 98
            radius: 4
            color: Style.white

            anchors.top: parent.top
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 4

            ColorizedImage {
                id: warningIcon
                source: root.warningsImages[root.warningId]
                anchors.centerIn: parent
                color: Style.red
            }
        }

        Text {
            id: warningText
            anchors.centerIn: parent
            anchors.horizontalCenterOffset: 34
            text: root.warningsTexts[root.warningId]
            font.pixelSize: 24
            font.family: "Barlow-mono"
            color: Style.white
        }
    }
}