// Copyright (C) 2022 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick

Column {
    id: rootItem

    property alias text: textItem.text
    property bool show: true

    default property alias contents: contentItem.children
    property real showHideAnimationSpeed: 400

    width: settings.settingsViewWidth

    Component.onCompleted: {
        // Set initial open state
        contentItem.visible = rootItem.show;
        contentItem.opacity = rootItem.show;
        contentItemArea.height = rootItem.show ? contentItem.height : 0;
    }

    Item {
        id: lightsSettings
        width: parent.width
        height: 30
        Rectangle {
            anchors.fill: parent
            color: "#404040"
            border.width: 1
            border.color: "#808080"
            opacity: 0.4
        }
        Image {
            x: 8
            source: "images/arrow.png"
            anchors.verticalCenter: parent.verticalCenter
            rotation: rootItem.show ? 90 : 0
            Behavior on rotation {
                NumberAnimation {
                    duration: showHideAnimationSpeed
                    easing.type: Easing.InOutQuad
                }
            }
        }

        Text {
            id: textItem
            x: 30
            anchors.verticalCenter: parent.verticalCenter
            color: "#f0f0f0"
            font.bold: true
            font.pixelSize: 16 * dp
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                rootItem.show = !rootItem.show;
                if (rootItem.show) {
                    hideAnimation.stop();
                    showAnimation.start();
                } else {
                    showAnimation.stop();
                    hideAnimation.start();
                }

            }
        }
    }

    Item {
        width: 1
        height: 5
    }

    SequentialAnimation {
        id: showAnimation
        ScriptAction {
            script: contentItem.visible = true;
        }
        ParallelAnimation {
            NumberAnimation {
                target: contentItemArea
                property: "height"
                to: contentItem.height
                duration: showHideAnimationSpeed
                easing.type: Easing.InOutQuad
            }
            SequentialAnimation {
                PauseAnimation {
                    duration: showHideAnimationSpeed / 2
                }
                NumberAnimation {
                    target: contentItem
                    property: "opacity"
                    to: 1.0
                    duration: showHideAnimationSpeed / 2
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }

    SequentialAnimation {
        id: hideAnimation
        ParallelAnimation {
            NumberAnimation {
                target: contentItemArea
                property: "height"
                to: 0
                duration: showHideAnimationSpeed
                easing.type: Easing.InOutQuad
            }
            SequentialAnimation {
                NumberAnimation {
                    target: contentItem
                    property: "opacity"
                    to: 0
                    duration: showHideAnimationSpeed / 2
                    easing.type: Easing.InOutQuad
                }
                PauseAnimation {
                    duration: showHideAnimationSpeed / 2
                }
            }
        }
        ScriptAction {
            script: contentItem.visible = false;
        }
    }

    Item {
        id: contentItemArea
        width: parent.width - 10
        x: 5
        Column {
            id: contentItem
            spacing: -10
        }
    }

    Item {
        width: 1
        height: 5
    }
}