import QtQuick
import QtQuick.Controls
import QtQuick.Shapes

Control {
    id: control

    default property alias contentData: pane.contentData
    property alias expanded: pane.visible
    property string title

    clip: true
    implicitHeight: triangle.implicitHeight + (expanded ? pane.implicitHeight : 0)
    implicitWidth: Math.max(triangle.implicitWidth, pane.implicitWidth)

    Behavior on implicitHeight {
        NumberAnimation {
            duration: 200
        }
    }

    ToolButton {
        id: triangle

        Mnemonic.label: control.title
        anchors.left: parent.left
        anchors.top: parent.top
        text: Mnemonic.richTextLabel

        contentItem: Row {
            spacing: 4

            Shape {
                anchors.verticalCenter: parent.verticalCenter
                height: 8
                rotation: control.expanded ? 90 : 0
                width: 8

                Behavior on rotation {
                    NumberAnimation {
                        duration: 200
                    }
                }

                ShapePath {
                    fillColor: "transparent"
                    startX: 2
                    startY: 0
                    strokeColor: triangle.palette.buttonText
                    strokeWidth: 1

                    PathLine {
                        x: 6
                        y: 4
                    }

                    PathLine {
                        x: 2
                        y: 8
                    }
                }
            }

            Label {
                anchors.verticalCenter: parent.verticalCenter
                color: triangle.palette.buttonText
                font: triangle.font
                text: triangle.text
            }
        }

        onClicked: function () {
            control.expanded = !control.expanded;
        }

        Shortcut {
            sequence: triangle.Mnemonic.sequence

            onActivated: function () {
                triangle.click();
            }
        }
    }

    Pane {
        id: pane

        anchors.left: parent.left
        anchors.top: triangle.bottom
        padding: 0
        visible: false
    }
}
