import QtQuick 2.3
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.14

import StatusQ.Core.Theme 0.1
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Utils 0.1

Control{
    id: root

    property var holdingsListModel
    property string permissionName
    property var permissionImageSource
    property var channelsListModel
    property bool isPrivate: false

    signal editClicked
    signal duplicateClicked
    signal removeClicked

    QtObject {
        id: d
        readonly property int flowRowHeight: 32
        readonly property int commonMargin: 16
        readonly property int designRadius: 16
        readonly property int itemTextPixelSize: 17
        readonly property int tagTextPixelSize: 15
        readonly property int buttonTextPixelSize: 12
        readonly property int buttonDiameter: 36
        readonly property int buttonTextSpacing: 6
    }
    background: Rectangle {
        color: "transparent"
        border.color: Theme.palette.baseColor2
        border.width: 1
        radius: d.designRadius
    }

    contentItem: ColumnLayout {
        spacing: 0

        Rectangle {
            id: header
            color: Theme.palette.baseColor2
            Layout.fillWidth: true
            Layout.preferredHeight: 34
            radius: d.designRadius

            RowLayout {
                anchors.fill: parent
                spacing: 8

                StatusIcon {
                    Layout.leftMargin: 19
                    icon: "checkmark"
                    Layout.preferredWidth: 11
                    Layout.preferredHeight: 8
                    color: Theme.palette.directColor1
                }

                StatusBaseText {
                    Layout.fillWidth: true
                    text: qsTr("Active")
                    font.pixelSize: d.tagTextPixelSize
                }

                StatusIcon {
                    Layout.rightMargin: 10
                    visible: root.isPrivate
                    icon: "hide"
                    color: Theme.palette.baseColor1
                }
            }
        }

        Flow {
            id: content
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.topMargin: 8
            Layout.rightMargin: d.commonMargin
            Layout.leftMargin: d.commonMargin
            Layout.bottomMargin: 20
            spacing: 6

            StatusBaseText {
                font.pixelSize: d.itemTextPixelSize
                height: d.flowRowHeight
                text: qsTr("Anyone who holds")
                verticalAlignment: Text.AlignVCenter
            }

            Repeater {
                model: root.holdingsListModel

                StatusListItemTag {
                    height: d.flowRowHeight
                    width: (implicitWidth > content.width) ? content.width : implicitWidth
                    leftPadding: 2
                    title: model.text
                    asset.name: model.imageSource
                    asset.isImage: true
                    asset.bgColor: "transparent"
                    asset.height: 28
                    asset.width: asset.height
                    closeButtonVisible: false
                    titleText.color: Theme.palette.primaryColor1
                    titleText.font.pixelSize: d.tagTextPixelSize
                }
            }

            StatusBaseText {
                height: d.flowRowHeight
                font.pixelSize: d.itemTextPixelSize
                text: qsTr("is allowed to")
                verticalAlignment: Text.AlignVCenter
            }

            StatusListItemTag {
                height: d.flowRowHeight
                title:  root.permissionName
                asset.name: root.permissionImageSource
                asset.isImage: false
                asset.bgColor: "transparent"
                closeButtonVisible: false
                titleText.color: Theme.palette.primaryColor1
                titleText.font.pixelSize: d.tagTextPixelSize
            }

            StatusBaseText {
                height: d.flowRowHeight
                font.pixelSize: d.itemTextPixelSize
                text: qsTr("in")
                verticalAlignment: Text.AlignVCenter
            }

            Repeater {
                model: root.channelsListModel

                StatusListItemTag {
                    readonly property bool isLetterIdenticon: !model.imageSource

                    asset.isLetterIdenticon: isLetterIdenticon
                    asset.emoji: model.emoji ? model.emoji : ""
                    asset.color: model.color ? model.color : ""
                    asset.width: isLetterIdenticon ? 20 : 28
                    asset.height: asset.width

                    leftPadding: isLetterIdenticon ? 6 : 2

                    height: d.flowRowHeight
                    width: (implicitWidth > content.width)
                           ? content.width : implicitWidth

                    title: model.text
                    asset.name: model.imageSource ? model.imageSource : ""
                    asset.isImage: true
                    asset.bgColor: "transparent"
                    closeButtonVisible: false
                    titleText.color: Theme.palette.primaryColor1
                    titleText.font.pixelSize: d.tagTextPixelSize
                }
            }
        }

        RowLayout {
            id: footer
            spacing: 85
            Layout.fillWidth: true
            Layout.bottomMargin: d.commonMargin
            Layout.alignment: Qt.AlignHCenter

            ColumnLayout {
                spacing: d.buttonTextSpacing
                StatusRoundButton {
                    Layout.alignment: Qt.AlignHCenter
                    icon.name: "edit_pencil"
                    Layout.preferredHeight: d.buttonDiameter
                    Layout.preferredWidth: Layout.preferredHeight
                    type: StatusRoundButton.Type.Primary
                    onClicked: root.editClicked()
                }
                StatusBaseText {
                    Layout.alignment: Qt.AlignHCenter
                    text: qsTr("Edit")
                    color: Theme.palette.primaryColor1
                    font.pixelSize: d.buttonTextPixelSize
                }
            }

            ColumnLayout {
                spacing: d.buttonTextSpacing
                StatusRoundButton {
                    Layout.alignment: Qt.AlignHCenter
                    icon.name: "copy"
                    Layout.preferredHeight: d.buttonDiameter
                    Layout.preferredWidth: Layout.preferredHeight
                    type: StatusRoundButton.Type.Primary
                    onClicked: root.duplicateClicked()
                }
                StatusBaseText {
                    Layout.alignment: Qt.AlignHCenter
                    text: qsTr("Duplicate")
                    color: Theme.palette.primaryColor1
                    font.pixelSize: d.buttonTextPixelSize
                }
            }

            ColumnLayout {
                spacing: d.buttonTextSpacing
                StatusRoundButton {
                    Layout.alignment: Qt.AlignHCenter
                    icon.name: "delete"
                    Layout.preferredHeight: d.buttonDiameter
                    Layout.preferredWidth: Layout.preferredHeight
                    type: StatusRoundButton.Type.Quaternary
                    onClicked: root.removeClicked()
                }
                StatusBaseText {
                    Layout.alignment: Qt.AlignHCenter
                    text: qsTr("Delete")
                    color: Theme.palette.dangerColor1
                    font.pixelSize: d.buttonTextPixelSize
                }
            }
        }
    }
}