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

Item {
    id: root
    height: 700
    width: 64

    property alias tripValue: tripInfo.valueText
    property alias odoValue: odoInfo.valueText
    property alias tempValue: tempInfo.valueText
    property bool active: false

    readonly property int margin: 23

    Item
    {
        id: odoInfoWrapper
        clip: true
        height: odoInfo.height + margin
        width: odoInfo.width
        anchors.bottom: tipAndOdoSeparator.top
        anchors.right: parent.right
        anchors.rightMargin: 2
        OdoTextElement
        {
            id: odoInfo
            labelText: "ODO"
            anchors.top: parent.top
            magicMarginForValue: -27
            magicMarginForTextLabel: -2
        }
    }

    Rectangle {
        id: tipAndOdoSeparator
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 176
        anchors.right: parent.right
        opacity: 1
        width: 64
        height: 2
        color: Style.kindOfGray
    }

    Item
    {
        id: tripInfoWrapper
        height: tripInfo.height + margin
        width: tripInfo.width
        anchors.top: tipAndOdoSeparator.bottom
        anchors.right: parent.right
        anchors.rightMargin: 2
        clip: true
        OdoTextElement
        {
            id: tripInfo
            labelText: "TRIP"
            anchors.bottom: parent.bottom
            magicMarginForValue: -7
            magicMarginForTextLabel: -5
        }
    }

    Item
    {
        height: timeInfo.height + margin
        width: timeInfo.width
        anchors.bottom: tempAndTimeSeparator.top
        anchors.left: parent.left
        anchors.leftMargin: 9
        clip: true
        TimeView
        {
            id: timeInfo
        }
    }

    Rectangle {
        id: tempAndTimeSeparator
        anchors.top: parent.top
        anchors.topMargin: 112
        anchors.right: parent.right
        opacity: 1
        width: 64
        height: 2
        color: Style.kindOfGray
    }

    Item
    {
        height: tempInfo.height + margin
        width: tempInfo.width
        anchors.top: tempAndTimeSeparator.bottom
        anchors.left: parent.left
        anchors.leftMargin: 9
        clip: true
        TextElement
        {
            id: tempInfo
            unitText: "°C"
            anchors.bottom: parent.bottom
        }
    }

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

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

            PropertyChanges { target: tempAndTimeSeparator; opacity: 0 }
            PropertyChanges { target: tempInfo; y: -tempInfo.height }
            PropertyChanges { target: timeInfo; y: timeInfo.height + margin }
        }
    ]

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

                    NumberAnimation { target: tempInfo; duration: 300; easing.type: Easing.OutQuad }
                    NumberAnimation { target: timeInfo; duration: 300; 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.y = -tempInfo.height - margin
        timeInfo.y = timeInfo.height

        tripInfo.y = -tripInfo.height
        odoInfo.y = odoInfo.height - margin
        root.opacity = 0
    }

    Component.onCompleted: {
        hideElements()
    }
}