//
//  Prop/style/PiFoldedPanel.qml
//
//  Created by Sam Gateau on 4/17/2019
//  Copyright 2019 High Fidelity, Inc.
//
//  Distributed under the Apache License, Version 2.0.
//  See the accompanying file LICENSE or https://www.apache.org/licenses/LICENSE-2.0.html
//

import QtQuick 2.7

Item {
    Global { id: global }
    id: root

    property var label: "panel"

    property alias isUnfold: headerFolderIcon.icon
    property alias hasContent: headerFolderIcon.filled
    property var indentDepth: 0

    // Panel Header Data Component
    property Component panelHeaderData: defaultPanelHeaderData  
    Component { // default is a Label
        id: defaultPanelHeaderData
        PiLabel {
            text: root.label
            horizontalAlignment: Text.AlignHCenter
        }
    }

    // Panel Frame Data Component
    property Component panelFrameData: defaultPanelFrameData  
    Component { // default is a column
        id: defaultPanelFrameData
        Column {
        }
    }

    property alias panelFrameContent: _panelFrameData.item

    // Header Item
    Rectangle {
        id: header
        height: global.slimHeight
        anchors.left: parent.left           
        anchors.right: parent.right
        anchors.margins: 0

        color: global.colorBackShadow // header of group is darker

        // First in the header, some indentation spacer
        Item {
            id: indentSpacer
            width: (headerFolderIcon.width * root.indentDepth) + global.horizontalMargin  // Must be non-zero
            height: parent.height

            anchors.verticalCenter: parent.verticalCenter
        }

        // Second, the folder button / indicator
        Item {
            id: headerFolder
            anchors.left: indentSpacer.right
            width: headerFolderIcon.width * 2
            anchors.verticalCenter: header.verticalCenter
            height: parent.height
            
            PiCanvasIcon {
                id: headerFolderIcon
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                fillColor: global.colorOrangeAccent 

                 MouseArea{
                    id: mousearea
                    anchors.fill: parent
                    onClicked: { root.isUnfold = !root.isUnfold }
                }
            }
        }

        // Next the header container
        // by default containing a Label showing the root.label
        Loader { 
            sourceComponent: panelHeaderData
            anchors.left: headerFolder.right
            anchors.right: header.right
            anchors.rightMargin: global.horizontalMargin * 2
            anchors.verticalCenter: header.verticalCenter
            height: parent.height
        }
    }

    // The Panel container 
    Rectangle {
        id: frame
        visible: root.isUnfold

        color: "transparent"
        border.color: global.colorBorderLight
        border.width: global.valueBorderWidth
        radius: global.valueBorderRadius

        anchors.margins: 0
        anchors.left: parent.left           
        anchors.right: parent.right
        anchors.top: header.bottom
        anchors.bottom: root.bottom  

        // Next the panel frame data
        Loader { 
            id: _panelFrameData
            sourceComponent: panelFrameData
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.leftMargin: 0
            anchors.rightMargin: 0
            clip: true
        }
    }

    height: header.height + isUnfold * _panelFrameData.item.height
    anchors.margins: 0
    anchors.left: parent.left           
    anchors.right: parent.right
}