import QtQuick
import QtQml.Models
import Weave.Controls
import Weave.Templates as T

T.CanvasFrame {
    id: root

    default property alias content: objectModel.children

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding)

    padding: Theme.component.canvasframe.borderWidth

    font.family: Theme.component.canvasframe.controlPanel.label.fontFamily
    font.pixelSize: Theme.component.canvasframe.controlPanel.label.fontSize
    font.weight: Theme.component.canvasframe.controlPanel.label.fontWeight
    textColor: Theme.component.canvasframe.controlPanel.label.textColor

    hoverEnabled: root.enabled

    contentModel: ObjectModel { id: objectModel }

    contentItem: Item {
        implicitWidth: controlPanel.width
        implicitHeight: controlPanel.height

        Repeater {
            model: root.contentModel
        }

        BoxShadow {
            z: 1 // lower than the control panel, higher than other content
            anchors.fill: controlPanel

            color: Theme.component.canvasframe.controlPanel.boxShadowColor
            offsetX: Theme.component.canvasframe.controlPanel.boxShadowX
            offsetY: Theme.component.canvasframe.controlPanel.boxShadowY
            spreadRadius: Theme.component.canvasframe.controlPanel.boxShadowSpread
            blurRadius: Theme.component.canvasframe.controlPanel.boxShadowBlur
        }

        Rectangle {
            id: controlPanel
            anchors {
                top: parent.top
                horizontalCenter: parent.horizontalCenter
            }

            height: Math.max(Theme.component.canvasframe.controlPanel.closeButton.height,
                             settingsButton.height)
                  + Theme.component.canvasframe.controlPanel.paddingTop
                  + Theme.component.canvasframe.controlPanel.paddingBottom

            width: closeButton.x + closeButton.width + Theme.component.canvasframe.controlPanel.paddingRight
            color: Theme.component.canvasframe.controlPanel.backgroundColor
            radius: Theme.component.canvasframe.controlPanel.borderBottomLeftRadius // TODO: Qt 6.8 - set corner radii
            z: 2 // higher than other content, lower than the background border

            IconButton {
                id: settingsButton
                anchors {
                    verticalCenter: parent.verticalCenter
                    left: parent.left
                    leftMargin: Theme.component.canvasframe.controlPanel.paddingLeft
                }
                visible: popup != null
                popup: root.settingsPopup
                popupIndicatorVisible: false
                icon.name: "settings"
                icon.color: Theme.component.canvasframe.controlPanel.setting.icon.fill
                icon.width: Theme.component.canvasframe.controlPanel.setting.icon.width
                icon.height: Theme.component.canvasframe.controlPanel.setting.icon.height
            }

            Text {
                id: stateLabel
                anchors {
                    verticalCenter: parent.verticalCenter
                    left: settingsButton.visible ? settingsButton.right : parent.left
                    leftMargin: Theme.component.canvasframe.controlPanel.label.paddingLeft
                }
                verticalAlignment: Text.AlignVCenter
                lineHeight: Theme.component.canvasframe.controlPanel.label.lineHeight
                lineHeightMode: Text.FixedHeight
                font: root.font
                text: root.text
                color: root.textColor
            }

            Row {
                id: actionsGroupRow
                anchors {
                    verticalCenter: parent.verticalCenter
                    left: stateLabel.right
                    leftMargin: Theme.component.canvasframe.controlPanel.label.paddingRight
                }
                height: settingsButton.height
                Repeater {
                    model: root.actionButtonsModel
                }
            }

            Divider {
                id: divider
                anchors {
                    verticalCenter: parent.verticalCenter
                    left: actionsGroupRow.right
                    leftMargin: Theme.component.canvasframe.controlPanel.child.paddingRight
                }
                orientation: Qt.Vertical
                height: controlPanel.height
                color: Theme.component.canvasframe.controlPanel.closeButton.borderLeftColor
            }

            ActionIconButton {
                id: closeButton
                anchors {
                    verticalCenter: parent.verticalCenter
                    left: divider.right
                }
                width: Theme.component.canvasframe.controlPanel.closeButton.width
                height: Theme.component.canvasframe.controlPanel.closeButton.height
                leftPadding: Theme.component.canvasframe.controlPanel.closeButton.paddingLeft
                rightPadding: Theme.component.canvasframe.controlPanel.closeButton.paddingRight
                topPadding: Theme.component.canvasframe.controlPanel.closeButton.paddingTop
                bottomPadding: Theme.component.canvasframe.controlPanel.closeButton.paddingBottom
                icon.name: Theme.icon.medium("close")
                icon.color: Theme.component.canvasframe.controlPanel.closeButton.icon.fill
                // We should not set sourceSize for the ui-controls icons (such as "close").
                //icon.width: Theme.component.canvasframe.controlPanel.closeButton.icon.width
                //icon.height: Theme.component.canvasframe.controlPanel.closeButton.icon.height
                onClicked: root.closeClicked()
            }
        }
    }

    background: Rectangle {
        implicitHeight: 2*border.width
        implicitWidth: 2*border.width
        color: "transparent"
        border.width: Theme.component.canvasframe.borderWidth
        border.color: Theme.component.canvasframe.borderColor
        z: 3 // higher than the control panel
    }
}