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

Item {
    id: root
    height: 60
    property alias tripValue: tripInfo.valueText
    property alias odoValue: odoInfo.valueText
    property alias tempValue: tempInfo.valueText
    property bool active: false
    property bool isDayMode

    readonly property int margin: 21

    property color separatorsColor: isDayMode ? Style.kindOfBrightGray : Style.kindOfGray
    property color fontsColor: isDayMode ? Style.black : Style.white

    Behavior on separatorsColor {
        NumberAnimation {
            duration: 1000
        }
    }

    Behavior on fontsColor {
        NumberAnimation {
            duration: 1000
        }
    }

    Item {
        id: tripInfoWrapper
        height: tripInfo.height
        width: tripInfo.width + margin
        anchors.right: tipAndOdoSeparator.left
        anchors.top: parent.top
        anchors.topMargin: 6
        clip: true
        OdoTextElement {
            id: tripInfo
            labelText: "TRIP"
            fontsColor: root.fontsColor
        }
    }

    Rectangle {
        id: tipAndOdoSeparator
        anchors.left: parent.left
        anchors.leftMargin: 168
        anchors.top: parent.top
        anchors.topMargin: 0
        opacity: 1
        width: 3
        height: 60
        color: separatorsColor
    }

    Item {
        id: odoInfoWrapper
        clip: true
        height: odoInfo.height
        width: odoInfo.width + margin
        anchors.left: tipAndOdoSeparator.right
        anchors.top: parent.top
        anchors.topMargin: 6
        OdoTextElement {
            id: odoInfo
            labelText: "ODO"
            fontsColor: root.fontsColor
        }
    }

    Item {
        height: tempInfo.height
        width: tempInfo.width + margin
        anchors.right: tempAndTimeSeparator.left
        anchors.top: parent.top
        anchors.topMargin: 6
        clip: true
        TextElement {
            id: tempInfo
            unitText: "°C"
            fontsColor: root.fontsColor
        }
    }

    Rectangle {
        id: tempAndTimeSeparator
        anchors.left: parent.left
        anchors.leftMargin: 545
        anchors.top: parent.top
        anchors.topMargin: 0
        opacity: 1
        width: 3
        height: 60
        color: separatorsColor
    }

    Item {
        height: timeInfo.height
        width: timeInfo.width + margin
        anchors.left: tempAndTimeSeparator.right
        anchors.top: parent.top
        anchors.topMargin: 6
        clip: true
        TimeView {
            id: timeInfo
            fontsColor: root.fontsColor
        }
    }

    states: [
        State {
            name: "visible"
            when: active
            PropertyChanges {
                target: root
                opacity: 1
            }
            PropertyChanges {
                target: tipAndOdoSeparator
                opacity: 1
            }
            PropertyChanges {
                target: tripInfo
                x: 0
            }
            PropertyChanges {
                target: odoInfo
                x: margin
            }

            PropertyChanges {
                target: tempAndTimeSeparator
                opacity: 1
            }
            PropertyChanges {
                target: tempInfo
                x: 0
            }
            PropertyChanges {
                target: timeInfo
                x: margin
            }
        },
        State {
            name: "hidden"
            when: !active
            PropertyChanges {
                target: root
                opacity: 0
            }
            PropertyChanges {
                target: tipAndOdoSeparator
                opacity: 0
            }
            PropertyChanges {
                target: tripInfo
                x: tripInfo.width + margin
            }
            PropertyChanges {
                target: odoInfo
                x: -odoInfo.width
            }

            PropertyChanges {
                target: tempAndTimeSeparator
                opacity: 0
            }
            PropertyChanges {
                target: tempInfo
                x: tempInfo.width + margin
            }
            PropertyChanges {
                target: timeInfo
                x: -timeInfo.width
            }
        }
    ]

    transitions: [
        Transition {
            to: "visible"
            SequentialAnimation {
                NumberAnimation {
                    target: root
                    duration: 16
                }
                ParallelAnimation {
                    NumberAnimation {
                        target: tipAndOdoSeparator
                        duration: 500
                        easing.type: Easing.OutQuad
                    }
                    NumberAnimation {
                        target: tempAndTimeSeparator
                        duration: 500
                        easing.type: Easing.OutQuad
                    }
                }
                ParallelAnimation {
                    NumberAnimation {
                        target: tripInfo
                        duration: 500
                        easing.type: Easing.OutQuad
                    }
                    NumberAnimation {
                        target: odoInfo
                        duration: 500
                        easing.type: Easing.OutQuad
                    }

                    NumberAnimation {
                        target: tempInfo
                        duration: 500
                        easing.type: Easing.OutQuad
                    }
                    NumberAnimation {
                        target: timeInfo
                        duration: 500
                        easing.type: Easing.OutQuad
                    }
                }
            }
        },
        Transition {
            to: "hidden"
            SequentialAnimation {
                NumberAnimation {
                    target: root
                    duration: 500
                }
                ParallelAnimation {
                    NumberAnimation {
                        target: tipAndOdoSeparator
                    }
                    NumberAnimation {
                        target: tempAndTimeSeparator
                    }
                }
                ParallelAnimation {
                    NumberAnimation {
                        target: tripInfo
                    }
                    NumberAnimation {
                        target: odoInfo
                    }

                    NumberAnimation {
                        target: tempInfo
                    }
                    NumberAnimation {
                        target: timeInfo
                    }
                }
            }
        }
    ]

    function hideElements() {
        tempAndTimeSeparator.opacity = 0
        tipAndOdoSeparator.opacity = 0

        tempInfo.x = tempInfo.width + margin
        timeInfo.x = -timeInfo.width

        tripInfo.x = tripInfo.width + margin
        odoInfo.x = -odoInfo.width
        root.opacity = 0
    }

    Component.onCompleted: {
        hideElements()
    }
}