import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import XSign.Controls 2.0
import XSignEdit 2.0
import XDesigner 2.0
import QtGraphicalEffects 1.0

Rectangle {
    id: _self
    color: XDesignStyle.widgetPaneColor

    property var page
    property XModule module: page.model && page.model.scene.module
    property alias model: _grid.model
    property string labelText
    property alias labelHeight: _recTitle.height
    property real tileMargin: 10
    property bool isMasterPage: !!(_self.page.model &&_self.page.model.isMaster !== false);

    signal selected(XModuleItem item)

    Rectangle {
        id: _recTitle
        width: _self.width
        color: XDesignStyle.widgetTabBackgroundColor
        z: 99

        Label {
            id: _labelTitle
            anchors.centerIn: parent
            text: _self.labelText
            font.pixelSize: 14
            color: XDesignStyle.widgetPaneTextColor
        }
    }

    GridView {
        id: _grid
        width: _self.width
        height: _self.height - _recTitle.height
        x: _self.tileMargin
        y: _recTitle.height +  _self.tileMargin
        cellWidth: 96
        cellHeight: 96
        delegate: _newCell
        highlight: Rectangle {
            color: "#D2D2D2";
        }
        highlightMoveDuration: 0
        ScrollBar.vertical: XScrollBar {}
    }

    Component {
        id: _newCell

        Item {
            id: _cell
            width: _grid.cellWidth - _self.tileMargin
            height: _grid.cellHeight - _self.tileMargin
            property var moduleItem: _self.module && _self.module.items.value(modelData)

            Rectangle {
                id: _rect
                anchors.fill: parent
                color: !isMasterPage ? "#e8e8e8"
                                     :_mouseArea.pressed ? "#E6E6E6"
                                     : _mouseArea.containsMouse ? "#E6E6E6"
                                     : "#FFFFFF"

                border.color: !isMasterPage ? "#e8e8e8"
                                            : _mouseArea.pressed ? "#E6E6E6"
                                            : _mouseArea.containsMouse ? "#E6E6E6"
                                            : "#FFFFFF"

                ColumnLayout {
                    anchors.centerIn: parent
                    spacing: 5
                    enabled: isMasterPage

                    Item {
                        Layout.preferredWidth: 32
                        Layout.preferredHeight: 32
                        Layout.alignment: Qt.AlignHCenter
                        Layout.margins: 2

                        Image {
                            id: _icon
                            width: 32
                            height: 32
                            source: _cell.moduleItem ? _cell.moduleItem.icon : ""
                            fillMode: Image.PreserveAspectFit
                        }

                        ColorOverlay {
                            id: _overlay
                            anchors.fill: _icon
                            source: _icon
                            color:  "#a9a9a9"
                            visible: !isMasterPage
                        }

                    }

                    Label {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        text: _cell.moduleItem ? _cell.moduleItem.title : ""
                        color: isMasterPage ? XDesignStyle.widgetPaneTextColor : "#a9a9a9"
                        font.family: XDesignStyle.tinyFontFamily
                        font.pixelSize: 11
                        horizontalAlignment: Qt.AlignHCenter

                    }
                }
            }

            MouseArea {
                id: _mouseArea
                anchors.fill: _rect
                hoverEnabled: true
                onClicked: {
                    _self.selected(_cell.moduleItem);
                    _grid.currentIndex = index;
                }
            }
        }
    }
}