import QtQuick
import "../services" as S

// Collapsible card for the applet dock.
// Set icon, title, and place applet content as children.
Rectangle {
    id: root

    property string icon: ""
    property string title: ""
    property bool expanded: false
    property color accentColor: S.Theme.base0C

    default property alias content: _contentColumn.children

    width: parent?.width ?? 300
    height: _header.height + (_contentColumn.visible ? _contentColumn.height : 0)
    radius: S.Theme.radius + 2
    color: Qt.rgba(S.Theme.base01.r, S.Theme.base01.g, S.Theme.base01.b, 0.7)
    border.color: Qt.rgba(S.Theme.base03.r, S.Theme.base03.g, S.Theme.base03.b, 0.3)
    border.width: 1
    clip: true

    Behavior on height {
        enabled: !S.Theme.reducedMotion
        NumberAnimation {
            duration: 150
            easing.type: Easing.OutCubic
        }
    }

    // Header
    Item {
        id: _header
        width: parent.width
        height: 28

        Text {
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            text: root.icon
            color: root.accentColor
            font.pixelSize: S.Theme.fontSize
            font.family: S.Theme.iconFontFamily
        }

        Text {
            anchors.left: parent.left
            anchors.leftMargin: 30
            anchors.verticalCenter: parent.verticalCenter
            text: root.title
            color: S.Theme.base05
            font.pixelSize: S.Theme.fontSize - 1
            font.bold: true
            font.family: S.Theme.fontFamily
        }

        Text {
            anchors.right: parent.right
            anchors.rightMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            text: root.expanded ? "\uF078" : "\uF054"
            color: S.Theme.base04
            font.pixelSize: S.Theme.fontSize - 2
            font.family: S.Theme.iconFontFamily

            Behavior on text {
                enabled: false
            }
        }

        HoverHandler {
            cursorShape: Qt.PointingHandCursor
        }

        TapHandler {
            onTapped: root.expanded = !root.expanded
        }

        // Divider
        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            height: 1
            color: S.Theme.base03
            opacity: root.expanded ? 0.5 : 0
        }
    }

    // Content area
    Column {
        id: _contentColumn
        anchors.top: _header.bottom
        anchors.topMargin: 4
        width: parent.width
        visible: root.expanded
    }
}