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 QtQuick.Window 2.11

import "fonts/Twemoji.js" as T
import "fonts/MutantStandard.js" as Mutant
import "overlays"
import "panes"
import "widgets"
import "theme"
import "utils.js" as Utils


ApplicationWindow {
	id: windowItem
	width: 1200
	height: 800
	visible: true
	title: "cwtch" + ""



	readonly property real ratio: height / width

	readonly property string cwtch_background_color: '#EEEEFF'
	readonly property string cwtch_color: '#B09CBC'
	readonly property string cwtch_dark_color: '#4B3557'

	FontAwesome { // PRETTY BUTTON ICONS
		id: awesome
		resource: "qrc:/qml/fonts/fontawesome.ttf"
	}

	FontLoader {
		source: "qrc:/qml/fonts/AdobeBlank.ttf"
	}

	function parse(text, size, isntEditable) { // REPLACE EMOJI WITH <IMG> TAGS
		T.twemoji.base = gcd.assetPath + "twemoji/"
		T.twemoji.ext = ".png"
		T.twemoji.size = "72x72"
		T.twemoji.className = "\" height=\""+size+"\" width=\""+size
		var retText = T.twemoji.parse(Utils.htmlEscaped(text))
		retText = retText.replace(/\n/g,"<br/>")

		// mutant standard stickers
		if (isntEditable) retText = Mutant.standard.parse(retText)

		return retText
	}

	function restoreEmoji(text) { // REPLACE <IMG> TAGS WITH EMOJI
		var re = RegExp('<img src="' + gcd.assetPath + 'twemoji/72x72/([^"]*?)\.png" width="10" height="10" \/>', 'g')
		var arr
		var newtext = text
		while (arr = re.exec(text)) {
			var pieces = arr[1].split("-")
			var replacement = ""
			for (var i = 0; i < pieces.length; i++) {
				replacement += T.twemoji.convert.fromCodePoint(pieces[i])
			}
			newtext = newtext.replace(arr[0], replacement)
		}
		return newtext
	}

    function ptToPx(pt) {
        return Screen.pixelDensity * 25.4 * pt / 72
    }

    function pxToPt(px) {
        return px * 72 / (Screen.pixelDensity * 25.4)
    }

    StackLayout {
        id: parentStack
        currentIndex: 1
        anchors.fill: parent

        readonly property int splashPane: 0
        readonly property int managementPane: 1
        readonly property int addEditProfilePane: 2
        readonly property int profilePane: 3
        property alias pane: parentStack.currentIndex

        Rectangle { // Splash pane
            color: "#FFFFFF"
            //Layout.fillHeight: true
            //Layout.minimumWidth: Layout.maximumWidth
            //Layout.minimumHeight: parent.height
            anchors.fill: parent

            visible: true

            SplashPane {
                id: splashPane
                anchors.fill: parent
                running: true
            }
        }

        Rectangle { // Profile login/management pane
                    anchors.fill: parent
                    visible: false
                    color: Theme.backgroundMainColor

                    ProfileManagerPane {
                        id: profilesPane
                        anchors.fill: parent
                    }
        }

        Rectangle { // Profile login/management pane
            anchors.fill: parent
            color: "#EEEEFF"


            ProfileAddEditPane{
                id: profileAddEditPane
                anchors.fill: parent
            }
        }


        RowLayout { // CONTAINS EVERYTHING EXCEPT THE TOOLBAR
            anchors.fill: parent
            spacing: 0

            Rectangle { // THE LEFT PANE WITH TOOLS AND CONTACTS
                color: "#D2C0DD"
                Layout.fillHeight: true
                Layout.minimumWidth: Layout.maximumWidth
                Layout.maximumWidth: theStack.pane == theStack.emptyPane ? parent.width : Theme.sidePaneMinSize
                visible: (windowItem.width >= Theme.doublePaneMinSize && !Qt.inputMethod.visible) || theStack.pane == theStack.emptyPane


                ContactList{
                    anchors.fill: parent
                }
            }

            Rectangle { // THE RIGHT PANE WHERE THE MESSAGES AND STUFF GO
                color: "#EEEEFF"
                Layout.fillWidth: true
                Layout.fillHeight: true


                StackLayout {
                    id: theStack
                    anchors.fill: parent
                    currentIndex: 0

                    property alias pane: theStack.currentIndex
                    readonly property int emptyPane: 0
                    readonly property int messagePane: 1
                    readonly property int settingsPane: 2
                    readonly property int userProfilePane: 3
                    readonly property int groupProfilePane: 4
                    readonly property int addGroupPane: 5

                    property string title


                    Item { anchors.fill: parent } // empty

                    OverlayPane { // messagePane
                        title: theStack.title
                        anchors.fill: parent
                    }

                    SettingsPane{ anchors.fill: parent }

                    PeerSettingsPane { anchors.fill: parent }

                    GroupSettingsPane{ anchors.fill: parent }

                    AddGroupPane { anchors.fill: parent }
                }
            }
        }

        focus: true
        Keys.onPressed: {
            if (event.key == Qt.Key_Back) {
                event.accepted = true
                if (theStack.currentIndex == theStack.emptyPane) {
                    androidCwtchActivity.rootHomeButtonHandle()
                } else if (theStack.currentIndex == theStack.userProfilePane || theStack.currentIndex == theStack.groupProfilePane) {
                    theStack.currentIndex = theStack.messagePane
                } else {
                    theStack.currentIndex = theStack.emptyPane
                }
            }
        }
	}

	PropertyAnimation { id: anmPopup; easing.type: Easing.InQuart; duration: 7000; target: popup; property: "opacity"; to: 0; }

	Rectangle { // THE ERROR MESSAGE POPUP
		id: popup
		anchors.top: parent.top
		anchors.horizontalCenter: parent.horizontalCenter
		anchors.topMargin: 20
		width: lblPopup.width + 30
		height: lblPopup.height + 8 * gcd.themeScale
		color: "#000000"
		opacity: 0.5
		radius: 15
		visible: false


		Label {
			id: lblPopup
			anchors.horizontalCenter: parent.horizontalCenter
			anchors.verticalCenter: parent.verticalCenter
			font.pixelSize: 18 * gcd.themeScale
			color: "#FFFFFF"
		}
	}


	Connections { // POPUPS ARE INVOKED BY GO FUNCS
		target: gcd

		onInvokePopup: function(str) {
			lblPopup.text = str
			popup.opacity = 0.5
			popup.visible = true
			anmPopup.restart()
		}

		onSetToolbarTitle: function(str) {
		    theStack.title = str
		}

		onLoaded: function() {
		    parentStack.pane = parentStack.managementPane
            splashPane.running = false
        }
	}

	Component.onCompleted: Mutant.standard.imagePath = gcd.assetPath;

	Connections {
        target: Qt.application
        onStateChanged: function() {
            // https://doc.qt.io/qt-5/qt.html#ApplicationState-enum
            if (Qt.application.state == 4) {
                // Active
                gcd.onActivate()
            }
        }
    }
}