import QtQuick 2.0
import QtQuick.Controls 1.0;
import QtQuick.Layouts 1.0;
import QtQuick.Dialogs 1.0;
import QtQuick.Window 2.1;
import QtQuick.Controls.Styles 1.1
import Ethereum 1.0

ApplicationWindow {
	id: root

	width: 900
	height: 600
	minimumHeight: 300

	title: "Ethereal"

	MenuBar {
		Menu {
			title: "File"
			MenuItem {
				text: "Import App"
				shortcut: "Ctrl+o"
				onTriggered: openAppDialog.open()
			}
		}

		Menu {
			title: "Test"
			MenuItem {
				text: "Test test"
				shortcut: "Ctrl+t"
				onTriggered: {
					var win
					function finishedLoading(){
						console.log("Trigged")
						win = wizard.createObject(root)
					}
					console.log("Loading wizard")

					var wizard = Qt.createComponent("first_run.qml")
					if(wizard.status== Component.Ready){
						console.log("Component is ready")
						finishedLoading()
					}else if( wizard.status == Component.Error){
						console.log("Error loading component:", wizard.errorString())
					}
					else{
						wizard.statusChanged.connect(finishedLoading)
						console.log("Component is NOT ready")
						win = wizard.createObject(root)
					}
				}
			}
		}

		Menu {
			title: "Network"
			MenuItem {
				text: "Add Peer"
				shortcut: "Ctrl+p"
				onTriggered: {
					addPeerWin.visible = true
				}
			}

			MenuItem {
				text: "Start"
				onTriggered: ui.connect()
			}
		}

		Menu {
			title: "Help"
			MenuItem {
				text: "About"
				onTriggered: {
					aboutWin.visible = true
				}
			}
		}

	}


	property var blockModel: ListModel {
		id: blockModel
	}

	function setView(view) {
		networkView.visible = false
		historyView.visible = false
		newTxView.visible = false
		view.visible = true
		//root.title = "Ethereal - " = view.title
	}

	SplitView {
		anchors.fill: parent
		resizing: false

		Rectangle {
			id: menu
			Layout.minimumWidth: 80
			Layout.maximumWidth: 80
			anchors.bottom: parent.bottom
			anchors.top: parent.top
			//color: "#D9DDE7"
			color: "#252525"

			ColumnLayout {
				y: 50
				anchors.left: parent.left
				anchors.right: parent.right
				height: 200
				Image {
					source: ui.assetPath("tx.png")
					anchors.horizontalCenter: parent.horizontalCenter
					MouseArea {
						anchors.fill: parent
						onClicked: {
							setView(historyView)
						}
					}
				}
				Image {
					source: ui.assetPath("new.png")
					anchors.horizontalCenter: parent.horizontalCenter
					MouseArea {
						anchors.fill: parent
						onClicked: {
							setView(newTxView)
						}
					}
				}
				Image {
					source: ui.assetPath("net.png")
					anchors.horizontalCenter: parent.horizontalCenter
					MouseArea {
						anchors.fill: parent
						onClicked: {
							setView(networkView)
						}
					}
				}
			}
		}

		Rectangle {
			id: mainView
			color: "#00000000"
			anchors.right: parent.right
			anchors.left: menu.right
			anchors.bottom: parent.bottom
			anchors.top: parent.top

			property var txModel: ListModel {
				id: txModel
			}

			Rectangle {
				id: historyView
				anchors.fill: parent

				property var title: "Transactions"
				TableView {
					id: txTableView
					anchors.fill: parent
					TableViewColumn{ role: "value" ; title: "Value" ; width: 100 }
					TableViewColumn{ role: "address" ; title: "Address" ; width: 430 }

					model: txModel
				}
			}

			Rectangle {
				id: newTxView
				property var title: "New transaction"
				visible: false
				anchors.fill: parent
				color: "#00000000"
				TabView{
					anchors.fill: parent
					anchors.rightMargin: 5
					anchors.leftMargin: 5
					anchors.topMargin: 5
					anchors.bottomMargin: 5
					id: newTransactionTab
					Component.onCompleted:{
						addTab("Simple send", newTransaction)
						addTab("Create contract", newContract)
					}
				}
				Component {
					id: newTransaction
					Column {
						id: simpleSendColumn
						states: [
							State{
								name: "ERROR"
							},
							State {
								name: "DONE"
								PropertyChanges { target: txSimpleValue; visible:false}
								PropertyChanges { target: txSimpleRecipient; visible:false}
								PropertyChanges { target:newSimpleTxButton; visible:false}

								PropertyChanges { target: txSimpleResult; visible:true}
								PropertyChanges { target: txSimpleOutput; visible:true}
								PropertyChanges { target:newSimpleTxButton; visible:true}
							},
							State {
								name: "SETUP"
								PropertyChanges { target: txSimpleValue; visible:true; text: ""}
								PropertyChanges { target: txSimpleRecipient; visible:true; text: ""}
								PropertyChanges { target: txSimpleButton; visible:true}
								PropertyChanges { target:newSimpleTxButton; visible:false}
							}
						]
						spacing: 5
						anchors.leftMargin: 5
						anchors.topMargin: 5
						anchors.top: parent.top
						anchors.left: parent.left

						function checkFormState(){
							if(txSimpleRecipient.text.length == 40 && txSimpleValue.text.length > 0) {
								txSimpleButton.state = "READY"
							}else{
								txSimpleButton.state = "NOTREADY"
							}
						}

						TextField {
							id: txSimpleRecipient
							placeholderText: "Recipient address"
							Layout.fillWidth: true
							validator: RegExpValidator { regExp: /[a-f0-9]{40}/ }
							width: 530
							onTextChanged: { checkFormState() }
						}
						TextField {
							id: txSimpleValue
							placeholderText: "Amount"
							anchors.rightMargin: 5
							validator: IntValidator { }
							onTextChanged: { checkFormState() }
						}
						Button {
							id: txSimpleButton
							states: [
								State {
									name: "READY"
									PropertyChanges { target: txSimpleButton; enabled: true}
								},
								State {
									name: "NOTREADY"
									PropertyChanges { target: txSimpleButton; enabled: false}
								}
							]
							text: "Send"
							enabled: false
							onClicked: {
								//this.enabled = false
								var res = eth.createTx(txSimpleRecipient.text, txSimpleValue.text,"","","")
								if(res[1]) {
									txSimpleResult.text = "There has been an error broadcasting your transaction:" + res[1].error()
								} else {
									txSimpleResult.text = "Your transaction has been broadcasted over the network.\nYour transaction id is:"
									txSimpleOutput.text = res[0]
									this.visible = false
									simpleSendColumn.state = "DONE"
								}
							}
						}
						Text {
							id: txSimpleResult
							visible: false

						}
						TextField {
							id: txSimpleOutput
							visible: false
							width: 530
						}
						Button {
							id: newSimpleTxButton
							visible: false
							text: "Create an other transaction"
							onClicked: {
								this.visible = false
								simpleSendColumn.state = "SETUP"
							}
						}
					}
				}
				Component {
					id: newContract
					Column {
						id: mainContractColumn
						function contractFormReady(){
							if(codeView.text.length > 0 && txValue.text.length > 0 && txGas.text.length > 0 && txGasPrice.length > 0) {
								txButton.state = "READY"
							}else{
								txButton.state = "NOTREADY"
							}
						}
						states: [
							State{
								name: "ERROR"
								PropertyChanges { target: txResult; visible:true}
								PropertyChanges { target: codeView; visible:true}
							},
							State {
								name: "DONE"
								PropertyChanges { target: txValue; visible:false}
								PropertyChanges { target: txGas; visible:false}
								PropertyChanges { target: txGasPrice; visible:false}
								PropertyChanges { target: codeView; visible:false}
								PropertyChanges { target: txButton; visible:false}
								PropertyChanges { target: txDataLabel; visible:false}

								PropertyChanges { target: txResult; visible:true}
								PropertyChanges { target: txOutput; visible:true}
								PropertyChanges { target: newTxButton; visible:true}
							},
							State {
								name: "SETUP"
								PropertyChanges { target: txValue; visible:true; text: ""}
								PropertyChanges { target: txGas; visible:true; text: ""}
								PropertyChanges { target: txGasPrice; visible:true; text: ""}
								PropertyChanges { target: codeView; visible:true; text: ""}
								PropertyChanges { target: txButton; visible:true}
								PropertyChanges { target: txDataLabel; visible:true}

								PropertyChanges { target: txResult; visible:false}
								PropertyChanges { target: txOutput; visible:false}
								PropertyChanges { target: newTxButton; visible:false}
							}
						]
						width: 400
						spacing: 5
						anchors.left: parent.left
						anchors.top: parent.top
						anchors.leftMargin: 5
						anchors.topMargin: 5

						TextField {
							id: txValue
							width: 200
							placeholderText: "Amount"
							validator: IntValidator { }
							onTextChanged: {
								contractFormReady()
							}
						}
						TextField {
							id: txGas
							width: 200
							validator: IntValidator { }
							placeholderText: "Gas"
							onTextChanged: {
								contractFormReady()
							}
						}
						TextField {
							id: txGasPrice
							width: 200
							placeholderText: "Gas price"
							validator: IntValidator { }
							onTextChanged: {
								contractFormReady()
							}
						}

						Label {
							id: txDataLabel
							text: "Transaction data"
						}

						TextArea {
							id: codeView
							anchors.topMargin: 5
							Layout.fillWidth: true
							width: parent.width /2
							onTextChanged: {
								contractFormReady()
							}
						}

						Button {
							id: txButton
							states: [
								State {
									name: "READY"
									PropertyChanges { target: txButton; enabled: true}
								},
								State {
									name: "NOTREADY"
									PropertyChanges { target: txButton; enabled:false}
								}
							]
							text: "Send"
							enabled: false
							onClicked: {
								//this.enabled = false
								var res = eth.createTx("", txValue.text, txGas.text, txGasPrice.text, codeView.text)
								if(res[1]) {
									txResult.text = "Your contract <b>could not</b> be send over the network:\n<b>"
									txResult.text += res[1].error()
									txResult.text += "</b>"
									mainContractColumn.state = "ERROR"
								} else {
									txResult.text = "Your contract has been submitted:\n"
									txOutput.text = res[0]
									mainContractColumn.state = "DONE"
								}
							}
						}
						Text {
							id: txResult
							visible: false
						}
						TextField {
							id: txOutput
							visible: false
							width: 530
						}
						Button {
							id: newTxButton
							visible: false
							text: "Create an other contract"
							onClicked: {
								this.visible = false
								txResult.text = ""
								txOutput.text = ""
								mainContractColumn.state = "SETUP"
							}
						}

						Button {
							id: debugButton
							text: "Debug"
							onClicked: {
								var res = ui.debugTx("", txValue.text, txGas.text, txGasPrice.text, codeView.text)
								debugWindow.visible = true
							}
						}
					}
				}
			}


			Rectangle {
				id: networkView
				property var title: "Network"
				visible: false
				anchors.fill: parent

				TableView {
					id: blockTable
					width: parent.width
					anchors.top: parent.top
					anchors.bottom: logView.top
					TableViewColumn{ role: "number" ; title: "#" ; width: 100 }
					TableViewColumn{ role: "hash" ; title: "Hash" ; width: 560 }

					model: blockModel

					/*
					 onDoubleClicked: {
						 popup.visible = true
						 popup.block = eth.getBlock(blockModel.get(row).hash)
						 popup.hashLabel.text = popup.block.hash
					 }
					 */
				}

				property var logModel: ListModel {
					id: logModel
				}

				TableView {
					id: logView
					width: parent.width
					height: 150
					anchors.bottom: parent.bottom
					TableViewColumn{ role: "description" ; title: "log" }

					model: logModel
				}
			}

			/*
			 signal addPlugin(string name)
			 Component {
				 id: pluginWindow
				 Rectangle {
					 anchors.fill: parent
					 Label {
						 id: pluginTitle
						 anchors.centerIn: parent
						 text: "Hello world"
					 }
					 Component.onCompleted: setView(this)
				 }
			 }

			 onAddPlugin: {
				 var pluginWin = pluginWindow.createObject(mainView)
				 console.log(pluginWin)
				 pluginWin.pluginTitle.text = "Test"
			 }
			 */
		}
	}

	FileDialog {
		id: openAppDialog
		title: "Open QML Application"
		onAccepted: {
			ui.open(openAppDialog.fileUrl.toString())
		}
	}

	statusBar: StatusBar {
		RowLayout {
			anchors.fill: parent
			Button {
				property var enabled: true
				id: connectButton
				onClicked: {
					if(this.enabled) {
						ui.connect(this)
					}
				}
				text: "Connect"
			}

			Button {
				id: importAppButton
				anchors.left: connectButton.right
				anchors.leftMargin: 5
				onClicked: openAppDialog.open()
				text: "Import App"
			}

			Label {
				anchors.left: importAppButton.right
				anchors.leftMargin: 5
				id: walletValueLabel
			}

			Label {
				anchors.right: peerImage.left
				anchors.rightMargin: 5
				id: peerLabel
				font.pixelSize: 8
				text: "0 / 0"
			}
			Image {
				id: peerImage
				anchors.right: parent.right
				width: 10; height: 10
				source: ui.assetPath("network.png")
			}
		}
	}

	Window {
		id: popup
		visible: false
		property var block
		Label {
			id: hashLabel
			anchors.horizontalCenter: parent.horizontalCenter
			anchors.verticalCenter: parent.verticalCenter
		}
	}

	Window {
		id: addPeerWin
		visible: false
		minimumWidth: 230
		maximumWidth: 230
		maximumHeight: 50
		minimumHeight: 50

		TextField {
			id: addrField
			anchors.verticalCenter: parent.verticalCenter
			anchors.left: parent.left
			anchors.leftMargin: 10
			placeholderText: "address:port"
			onAccepted: {
				ui.connectToPeer(addrField.text)
				addPeerWin.visible = false
			}
		}
		Button {
			anchors.left: addrField.right
			anchors.verticalCenter: parent.verticalCenter
			anchors.leftMargin: 5
			text: "Add"
			onClicked: {
				ui.connectToPeer(addrField.text)
				addPeerWin.visible = false
			}
		}
		Component.onCompleted: {
			addrField.focus = true
		}
	}

	Window {
		id: aboutWin
		visible: false
		title: "About"
		minimumWidth: 350
		maximumWidth: 350
		maximumHeight: 200
		minimumHeight: 200

		Image {
			id: aboutIcon
			height: 150
			width: 150
			fillMode: Image.PreserveAspectFit
			smooth: true
			source: ui.assetPath("facet.png")
			x: 10
			y: 10
		}

		Text {
			anchors.left: aboutIcon.right
			anchors.leftMargin: 10
			font.pointSize: 12
			text: "<h2>Ethereal</h2><br><h3>Development</h3>Jeffrey Wilcke<br>Maran Hidskes<br><h3>Binary Distribution</h3>Jarrad Hope<br>"
		}

	}

	Window {
		id: debugWindow
		visible: false
		title: "Debugger"
		minimumWidth: 600
		minimumHeight: 600
		width: 800
		height: 600

		SplitView {
			anchors.fill: parent
			property var asmModel: ListModel {
				id: asmModel
			}
			TableView {
				id: asmTableView
				width: 200
				TableViewColumn{ role: "value" ; title: "" ; width: 100 }
				model: asmModel
			}

			Rectangle {
				anchors.left: asmTableView.right
				anchors.right: parent.right
				SplitView {
					orientation: Qt.Vertical
					anchors.fill: parent

					TableView {
						property var memModel: ListModel {
							id: memModel
						}
						height: parent.height/2
						width: parent.width
						TableViewColumn{ id:mnumColmn ; role: "num" ; title: "#" ; width: 50}
						TableViewColumn{ role: "value" ; title: "Memory" ; width: 750}
						model: memModel
					}

					TableView {
						property var stackModel: ListModel {
							id: stackModel
						}
						height: parent.height/2
						width: parent.width
						TableViewColumn{ role: "value" ; title: "Stack" ; width: parent.width }
						model: stackModel
					}
				}
			}
		}
	}

	function setAsm(asm) {
		//for(var i = 0; i < asm.length; i++) {
			asmModel.append({asm: asm})
			//}
		}
		function clearAsm() {
			asmModel.clear()
		}

		function setMem(mem) {
			memModel.append({num: mem.num, value: mem.value})
		}
		function clearMem(){
			memModel.clear()
		}

		function setStack(stack) {
			stackModel.append({value: stack})
		}

		function clearStack() {
			stackModel.clear()
		}

		function loadPlugin(name) {
			console.log("Loading plugin" + name)
			mainView.addPlugin(name)
		}

		function setWalletValue(value) {
			walletValueLabel.text = value
		}

		function addTx(tx) {
			txModel.insert(0, {hash: tx.hash, address: tx.address, value: tx.value})
		}

		function addBlock(block) {
			blockModel.insert(0, {number: block.number, hash: block.hash})
		}

		function addLog(str) {
			if(str.len != 0) {
				logModel.append({description: str})
			}
		}

		function setPeers(text) {
			peerLabel.text = text
		}
	}