import qs.config
import QtQuick
import QtQuick.Layouts

Item {
    id: contentMenu
    Layout.fillWidth: true
    Layout.fillHeight: true

    opacity: visible ? 1 : 0
    scale: visible ? 1 : 0.95

    Behavior on opacity {
        enabled: Config.runtime.appearance.animations.enabled
        NumberAnimation {
            duration: Metrics.chronoDuration("normal")
            easing.type: Appearance.animation.curves.standard[0] // using standard easing
        }
    }
    Behavior on scale {
        enabled: Config.runtime.appearance.animations.enabled
        NumberAnimation {
            duration: Metrics.chronoDuration("normal")
            easing.type: Appearance.animation.curves.standard[0]
        }
    }

    property string title: ""
    property string description: ""
    default property alias content: stackedSections.data

    Item {
        id: headerArea
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.topMargin: Metrics.margin("verylarge")
        anchors.leftMargin: Metrics.margin("verylarge")
        anchors.rightMargin: Metrics.margin("verylarge")
        width: parent.width

        ColumnLayout {
            id: headerContent
            anchors.left: parent.left
            anchors.right: parent.right
            spacing: Metrics.margin("small")

            ColumnLayout {
                StyledText {
                    text: contentMenu.title
                    font.pixelSize: Metrics.fontSize("huge")
                    font.bold: true
                    font.family: Metrics.fontFamily("title")
                }
                StyledText {
                    text: contentMenu.description
                    font.pixelSize: Metrics.fontSize("small")
                }
            }

            Rectangle {
                id: hr
                Layout.alignment: Qt.AlignLeft | Qt.AlignRight
                implicitHeight: 1
            }
        }

        height: headerContent.implicitHeight
    }

    Flickable {
        id: mainScroll
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: headerArea.bottom
        anchors.bottom: parent.bottom
        anchors.leftMargin: Metrics.margin("verylarge")
        anchors.rightMargin: Metrics.margin("verylarge")
        anchors.topMargin: Metrics.margin("normal")
        clip: true
        interactive: true
        boundsBehavior: Flickable.StopAtBounds
        flickableDirection: Flickable.VerticalFlick

        contentHeight: mainContent.childrenRect.height + Appearance.margin.small
        contentWidth: width

        Item {
            id: mainContent
            width: mainScroll.width
            height: mainContent.childrenRect.height

            Column {
                id: stackedSections
                width: Math.min(mainScroll.width, 1000)
                x: (mainContent.width - width) / 2
                spacing: Appearance.margin.normal
            }
        }
    }
}