import QtGraphicalEffects 1.0
import QtQuick 2.7
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.3
import QtQuick.Window 2.11
import QtQuick.Controls 1.4

import "../styles"

ColumnLayout {
	id: root
	anchors.fill: parent
	width: parent.width

	property alias image: imgProfileImg.source
	property string nick
	property string onion


	Item{ height: 6 }

	Item { // PROFILE IMAGE
		id: imgProfile
		implicitWidth: 96
		implicitHeight: 96
		anchors.horizontalCenter: parent.horizontalCenter

		Rectangle { // WHITE CIRCLE BORDER
			width: 96
			height: 96
			color: "#FFFFFF"
			radius: width / 2

			Image { // ACTUAL IMAGE
				id: imgProfileImg
				anchors.fill: parent
				fillMode: Image.PreserveAspectFit
				visible: false
			}

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

			OpacityMask { // WE PUT IT ALL TOGETHER ANNND
				anchors.fill: imgProfileImg
				source: imgProfileImg
				maskSource: mask
			}


			Rectangle { // TOR STATUS INDICATOR
				color: "#FFFFFF"
				width: 12
				height: 12
				radius: 3
				anchors.right: parent.right
				anchors.bottom: parent.bottom
				anchors.margins: 8


				Rectangle { //0: no tor, 1: progress 0%, 2: progress 1-99%, 3: DONE
					id: rectTorStatus
					color: code == 3 ? "green": code == 2 ? "orange" : code == 1 ? "yellow" : "red"
					width: 8
					height: 8
					radius: 2
					anchors.right: parent.right
					anchors.bottom: parent.bottom
					anchors.margins: 2

					property int code
					property string message
					property bool hovered


					MouseArea {
						anchors.fill: parent
						hoverEnabled: true

						onEntered: rectTorStatus.hovered = true

						onExited: rectTorStatus.hovered = false
					}


					ToolTip.visible: hovered
					ToolTip.delay: 400
					ToolTip.timeout: 5000
					ToolTip.text: message
				}
			}
		}
	}

	InplaceEditText { // USER NICKNAME
		id: lblNick
		anchors.horizontalCenter: parent.horizontalCenter
		width: parent.width

		onUpdated: {
		    nick = lblNick.text
			gcd.updateNick(lblNick.text)
		}
	}

	/*
	Text {
		id: txtNick
		fontSizeMode: Text.HorizontalFit
		minimumPixelSize: 10
		font.pixelSize: 20
		width: 195
		anchors.horizontalCenter: parent.horizontalCenter
		text: cbNick.editText

		MouseArea {
			anchors.fill: parent
			onClicked: {
				parent.visible = false
				cbNick.visible = true
			}
		}
	}

	ComboBox { // USER NICKNAME
		id: cbNick
		anchors.horizontalCenter: parent.horizontalCenter
		popup.font.pixelSize: 12
		width: 200
		font.pixelSize: 20
		model: ["erinn", "erinn (open privacy)", "supergirl", "add new profile..."]
		visible: false

		onCurrentTextChanged: {
			visible = false
			txtNick.visible = true
		}
	}
	*/

	ScalingLabel { // ONION ADDRESS
		id: lblOnion
		//font.pixelSize: 6
		Layout.fillWidth: true
		padding: 3
		horizontalAlignment: Text.AlignHCenter
		text:onion
	}

	Row { // TOOLS FOR EDITING PROFILE
		anchors.horizontalCenter: parent.horizontalCenter
		spacing: gcd.themeScale * 2


		TextEdit { // USED TO POWER THE COPY/PASTE BUTTON
			id: txtHidden
			visible: false
		}

		SimpleButton { // COPY ONION ADDRESS BUTTON
			icon: "regular/clipboard"
			//: Button for copying profile onion address to clipboard
			text: qsTr("copy-btn")

			onClicked: {
				//: Copied to clipboard
				gcd.popup(qsTr("copied-clipboard-notification"))
				txtHidden.text = nick.replace(" ", "~") + "~" + onion
				txtHidden.selectAll()
				txtHidden.copy()
			}
		}

		SimpleButton { // SETTINGS BUTTON
			icon: "solid/cog"

			onClicked: theStack.pane = theStack.settingsPane
		}

		SimpleButton { // SIGN OUT BUTTON
			icon: "solid/sign-out-alt"

			onClicked: {
				gcd.popup("not yet implemented, sorry :(")
			}
		}
	}

	Row {
		anchors.horizontalCenter: parent.horizontalCenter
		spacing: gcd.themeScale * 2


		SimpleButton { // CREATE GROUP BUTTON
			icon: "regular/clipboard"
			//: create new group button
			text: qsTr("new-group-btn")

			onClicked: theStack.pane = theStack.addGroupPane
		}
	}

    TextField {
        anchors.horizontalCenter: parent.horizontalCenter
        style: CwtchTextFieldStyle{ width: 400 }
        //: ex: "... paste an address here to add a contact ..."
        placeholderText: qsTr("paste-address-to-add-contact")
        horizontalAlignment: TextInput.AlignHCenter

        onTextChanged: {
            if (text != "") {
                gcd.importString(text)
                text = ""
            }
        }
    }

	Connections {
		target: gcd

		onUpdateMyProfile: function(_nick, _onion, _image) {
			nick = _nick
			lblNick.text = _nick
			onion = _onion
			image = _image
		}

		onTorStatus: function(code, str) {
			rectTorStatus.code = code
			rectTorStatus.message = str
		}
	}
}