import QtGraphicalEffects 1.0
import QtQuick 2.7
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.3
import CustomQmlTypes 1.0
import "styles"
import "." as Widgets
import "theme"
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Item { // LOTS OF NESTING TO DEAL WITH QT WEIRDNESS, SORRY
    id: crItem
    anchors.left: parent.left
    anchors.right: parent.right
    height: 78 * logscale + 3
    implicitHeight: 78 * logscale + 3 //height

    property real logscale: 4 * Math.log10(gcd.themeScale + 1)
    property string displayName
    property alias image: portrait.source
    property string handle
    property bool isActive
    property bool isHover
    property string tag // profile version/type

    property alias badgeColor: portrait.badgeColor
    property alias portraitBorderColor: portrait.portraitBorderColor
    property alias portraitColor: portrait.portraitColor
    property alias nameColor: cn.color
    property alias onionColor: onion.color
    property alias onionVisible: onion.visible
    property alias badgeVisible: portrait.badgeVisible
    property alias badgeContent: portrait.badgeContent
    property alias hoverEnabled: buttonMA.hoverEnabled

    property alias content: extraMeta.children

    // TODO: should be in ContactRow
    property bool blocked

    signal clicked(string handle)

    Rectangle { // CONTACT ENTRY BACKGROUND COLOR
        id: crRect
        anchors.left: parent.left
        anchors.right: parent.right
        height: crItem.height
        width: parent.width
        color: isHover ? Theme.backgroundPaneColor : (isActive ? Theme.backgroundPaneColor : Theme.backgroundMainColor)

        Portrait {
            id: portrait
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 25 * logscale
        }

        ColumnLayout {
            id: portraitMeta

            anchors.left: portrait.right
            anchors.right: parent.right
            anchors.leftMargin: 4 * logscale
            anchors.verticalCenter: parent.verticalCenter

            spacing: 2 * gcd.themeScale


            EllipsisLabel { // CONTACT NAME
                id: cn
                anchors.right: parent.right
                anchors.left: parent.left
                size: Theme.usernameSize * gcd.themeScale
                weight: Font.Bold
                strikeout: blocked
                text: displayName
            }

            EllipsisLabel { // Onion
                id: onion
                text: handle
                anchors.right: parent.right
                anchors.left: parent.left
                size: Theme.secondaryTextSize * gcd.themeScale
                strikeout: blocked
            }

            onWidthChanged: {
                cn.textResize()
                onion.textResize()
            }

        }

        Column {
            id: extraMeta
            anchors.left: portraitMeta.right
            anchors.verticalCenter: parent.verticalCenter
        }
    }

    MouseArea {  // Full row mouse area triggering onClick
        id: buttonMA
        anchors.fill: parent
        hoverEnabled: true

        onClicked: { crItem.clicked(crItem.handle) }

        onEntered: {
            isHover = true
        }

        onExited: {
            isHover = false
        }
    }

    Connections { // UPDATE UNREAD MESSAGES COUNTER
        target: gcd

        onResetMessagePane: function() {
            isActive = false
        }

        onUpdateContactBlocked: function(_handle, _blocked) {
            if (handle == _handle) {
                blocked = _blocked
            }
        }

        onUpdateContactDisplayName: function(_handle, _displayName) {
            if (handle == _handle) {
                displayName = _displayName + (blocked == true ? " (blocked)" : "")
            }
        }

        onUpdateContactPicture: function(_handle, _image) {
            if (handle == _handle) {
                image = _image
            }
        }
    }
}