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

Item {
	id: imgProfile
	implicitWidth: baseWidth
	implicitHeight: baseWidth
	anchors.margins: 5

	property string handle
	property alias source: img.source
	property int status
	property bool isGroup
	property bool showStatus
	property bool highlight
	property real logscale: 4 * Math.log10(gcd.themeScale + 1)
	property int baseWidth:  48 * logscale

	Rectangle {
		id: mainImage
		width: baseWidth
		height: baseWidth
		color:  highlight ? windowItem.cwtch_dark_color: "#FFFFFF"
		radius: width / 2

		Rectangle {
			width: highlight ? baseWidth - 4 : baseWidth
			height: highlight ? baseWidth - 4 : baseWidth
			color:  "#FFFFFF"
			radius: width / 2
			anchors.centerIn:parent


			Image { // PROFILE IMAGE
				id: img
				anchors.fill: parent
				fillMode: Image.PreserveAspectFit
				visible: false
			}

			Image { // CIRCLE MASK
				id: mask
				fillMode: Image.PreserveAspectFit
				visible: false
				source: "qrc:/qml/images/extra/clipcircle.png"
			}

			OpacityMask {
				anchors.fill: img
				source: img
				maskSource: mask
			}

		}

		Rectangle { // PRESENCE INDICATOR
					visible: showStatus
					color: "#FFFFFF"
					width: 8 * logscale
					height: 8 * logscale
					radius: 2 * logscale
					anchors.right: parent.right
					anchors.bottom: parent.bottom
					anchors.margins: 4 * logscale


					Rectangle { //-2:WtfCodeError,-1:Untrusted,0:Disconnected,1:Connecting,2:Connected,3:Authenticated,4:Synced,5:Failed,6:Killed
						color: status == 4 ? "green" : status == 3 ? "green" : status == -1 ? "blue" : status == 1 ? "orange" : status == 2 ? "orange" : "red"
						width: 5 * logscale
						height: 5 * logscale
						radius: 2 * logscale
						anchors.right: parent.right
						anchors.bottom: parent.bottom
						anchors.margins: 1.5 * logscale
					}
				}

	}
}