import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Material
import QtQuick.Layouts
import TactileIPC 1.0

Item {
    id: root
    implicitWidth: 350

    property alias title: titleText.text
    property bool expanded: true
    property int contentPadding: 12
    property color panelBgColor: Backend.lightMode ? "#FFFFFF" : "#2F2F2F"
    property color panelBorderColor: Backend.lightMode ? "#E0E0E0" : "#3A3A3A"
    property color titleColor: Backend.lightMode ? "#424242" : "#E0E0E0"
    property color dividerColor: Backend.lightMode ? "#EEEEEE" : "#3A3A3A"

    default property alias content: contentArea.data
    implicitHeight: header.height + contentWrapper.height
    Rectangle {
        id: panelBg
        anchors.fill: parent
        radius: 6
        color: root.panelBgColor
        border.color: root.panelBorderColor
    }

    Rectangle {
        id: header
        width: parent.width
        height: 44
        radius: 6
        color: "transparent"
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right

        MouseArea {
            anchors.fill: parent
            onClicked: root.expanded = !root.expanded
        }

        RowLayout {
            anchors.fill: parent
            anchors.leftMargin: 12
            anchors.rightMargin: 8
            spacing: 8

            Rectangle {
                width: 10
                height: 10
                radius: 2
                color: Material.color(Material.Green)
                Layout.alignment: Qt.AlignVCenter
            }

            Label {
                id: titleText
                text: "placehold"
                font.pixelSize: 16
                color: root.titleColor
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignVCenter
            }

            ToolButton {
                id: arrowBtn
                text: "\u25BE"
                font.pixelSize: 18
                background: null
                rotation: root.expanded ? 180 : 0
                Layout.alignment: Qt.AlignVCenter

                Behavior on rotation {
                    NumberAnimation {
                        duration: 200;
                        easing.type: Easing.InOutQuad
                    }
                }
                onClicked: root.expanded = !root.expanded
            }
        }

        Rectangle {
            height: 1
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            color: root.dividerColor
            visible: true
        }
    }

    Item {
        id: contentWrapper
        anchors.top: header.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        height: root.expanded ? contentArea.implicitHeight + root.contentPadding * 2 : 0
        clip: true

        Behavior on height {
            NumberAnimation {
                duration: 220;
                easing.type: Easing.InOutQuad
            }
        }

        ColumnLayout {
            id: contentArea
            anchors.fill: parent
            anchors.margins: root.contentPadding
            spacing: 10
        }
    }
}