import QtQuick 2.2
import QtQuick.Controls.Styles 1.1
import QtQuick.Controls 1.1
import QtQuick.Dialogs 1.1
import QtQuick.Layouts 1.1
import Qt.labs.settings 1.0
import "js/Debugger.js" as Debugger
import "js/ErrorLocationFormater.js" as ErrorLocationFormater

Rectangle {
	id: debugPanel
	objectName: "debugPanel"
	anchors.fill: parent;
	color: "#ededed"
	clip: true
	Keys.onPressed:
	{
		if (event.key === Qt.Key_F10)
			Debugger.moveSelection(1);
		else if (event.key === Qt.Key_F9)
			Debugger.moveSelection(-1);
	}

	onVisibleChanged:
	{
		if (visible)
			forceActiveFocus();
	}

	function update(giveFocus)
	{
		if (statusPane.result.successful)
		{
			Debugger.init();
			debugScrollArea.visible = true;
			compilationErrorArea.visible = false;
			machineStates.visible = true;
		}
		else
		{
			debugScrollArea.visible = false;
			compilationErrorArea.visible = true;
			machineStates.visible = false;
			var errorInfo = ErrorLocationFormater.extractErrorInfo(statusPane.result.compilerMessage, false);
			errorLocation.text = errorInfo.errorLocation;
			errorDetail.text = errorInfo.errorDetail;
			errorLine.text = errorInfo.errorLine;
		}
		if (giveFocus)
			forceActiveFocus();
	}

	Connections {
		target: codeModel
		onCompilationComplete: update(false)
	}

	Rectangle
	{
		visible: false;
		id: compilationErrorArea
		width: parent.width - 20
		height: 500
		color: "#ededed"
		anchors.left: parent.left
		anchors.top: parent.top
		anchors.margins: 10
		ColumnLayout
		{
			width: parent.width
			anchors.top: parent.top
			spacing: 25
			RowLayout
			{
				height: 100
				ColumnLayout
				{
					Text {
						color: "red"
						id: errorLocation
					}
					Text {
						color: "#4a4a4a"
						id: errorDetail
					}
				}
			}

			Rectangle
			{
				width: parent.width - 6
				height: 2
				color: "#d0d0d0"
			}

			RowLayout
			{
				Text
				{
					color: "#4a4a4a"
					id: errorLine
				}
			}
		}
	}

	Flickable {
		property int firstColumnWidth: 180
		property int secondColumnWidth: 250
		id: debugScrollArea
		flickableDirection: Flickable.VerticalFlick
		anchors.fill: parent
		contentHeight: 4000
		contentWidth: parent.width
		Rectangle
		{
			color: "transparent"
			anchors.fill: parent
			ColumnLayout
			{
				property int sideMargin: 10
				id: machineStates
				anchors.top: parent.top
				anchors.topMargin: 15
				anchors.left: parent.left;
				anchors.leftMargin: machineStates.sideMargin
				anchors.right: parent.right;
				anchors.rightMargin: machineStates.sideMargin
				anchors.fill: parent
				Layout.fillWidth: true
				Layout.fillHeight: true
				RowLayout {
					// step button + slider
					id: buttonRow
					spacing: machineStates.sideMargin
					height: 27
					Layout.fillWidth: true

					Rectangle
					{
						height: parent.height
						color: "transparent"
						width: debugScrollArea.firstColumnWidth
						RowLayout {
							anchors.horizontalCenter: parent.horizontalCenter
							id: jumpButtons
							spacing: 3
							StepActionImage
							{
								id: jumpOutBackAction;
								enabledStateImg: "qrc:/qml/img/jumpoutback.png"
								disableStateImg: "qrc:/qml/img/jumpoutbackdisabled.png"
								onClicked: Debugger.stepOutBack()
								width: 28
								height: 30
								buttonTooltip: qsTr("Step Out Back")
							}

							StepActionImage
							{
								id: jumpIntoBackAction
								enabledStateImg: "qrc:/qml/img/jumpintoback.png"
								disableStateImg: "qrc:/qml/img/jumpintobackdisabled.png"
								onClicked: Debugger.stepIntoBack()
								width: 28
								height: 30
								buttonTooltip: qsTr("Step Into Back")
							}

							StepActionImage
							{
								id: jumpOverBackAction
								enabledStateImg: "qrc:/qml/img/jumpoverback.png"
								disableStateImg: "qrc:/qml/img/jumpoverbackdisabled.png"
								onClicked: Debugger.stepOverBack()
								width: 28
								height: 30
								buttonTooltip: qsTr("Step Over Back")
							}

							StepActionImage
							{
								id: jumpOverForwardAction
								enabledStateImg: "qrc:/qml/img/jumpoverforward.png"
								disableStateImg: "qrc:/qml/img/jumpoverforwarddisabled.png"
								onClicked: Debugger.stepOverForward()
								width: 28
								height: 30
								buttonTooltip: qsTr("Step Over Forward")
							}

							StepActionImage
							{
								id: jumpIntoForwardAction
								enabledStateImg: "qrc:/qml/img/jumpintoforward.png"
								disableStateImg: "qrc:/qml/img/jumpintoforwarddisabled.png"
								onClicked: Debugger.stepIntoForward()
								width: 28
								height: 30
								buttonTooltip: qsTr("Step Into Forward")
							}

							StepActionImage
							{
								id: jumpOutForwardAction
								enabledStateImg: "qrc:/qml/img/jumpoutforward.png"
								disableStateImg: "qrc:/qml/img/jumpoutforwarddisabled.png"
								onClicked: Debugger.stepOutForward()
								width: 28
								height: 30
								buttonTooltip: qsTr("Step Out Forward")
							}
						}
					}

					Rectangle {
						color: "transparent"
						Layout.fillWidth: true
						height: parent.height
						Slider {
							id: statesSlider
							anchors.fill: parent
							tickmarksEnabled: true
							stepSize: 1.0
							onValueChanged: Debugger.jumpTo(value);
							style: SliderStyle {
								groove: Rectangle {
									implicitHeight: 3
									color: "#7da4cd"
									radius: 8
								}
								handle: Rectangle {
									anchors.centerIn: parent
									color: control.pressed ? "white" : "lightgray"
									border.color: "gray"
									border.width: 2
									implicitWidth: 10
									implicitHeight: 10
									radius: 12
								}
							}
						}
					}
				}

				RowLayout {
					// Assembly code
					id: assemblyCodeRow
					Layout.fillWidth: true
					height: 405
					implicitHeight: 405
					spacing: machineStates.sideMargin

					Rectangle
					{
						id: stateListContainer
						width: debugScrollArea.firstColumnWidth
						height: parent.height
						border.width: 3
						border.color: "#deddd9"
						color: "white"
						anchors.top: parent.top
						ListView {
							anchors.fill: parent
							anchors.leftMargin: 3
							anchors.rightMargin: 3
							anchors.topMargin: 3
							anchors.bottomMargin: 3
							clip: true
							id: statesList
							delegate: renderDelegate
							highlight: highlightBar
							highlightFollowsCurrentItem: false
						}

						Component {
							id: highlightBar
							Rectangle {
								radius: 4
								height: statesList.currentItem.height
								width: statesList.currentItem.width;
								y: statesList.currentItem.y
								color: "#4A90E2"
								Behavior on y {
									 PropertyAnimation { properties: "y"; easing.type: Easing.InOutQuad; duration: 50}
								}
							}
						}

						Component {
							id: renderDelegate
							RowLayout {
								id: wrapperItem
								height: 20
								width: parent.width
								spacing: 5
								Text {
									anchors.left: parent.left
									anchors.leftMargin: 10
									width: 15
									color: "#b2b3ae"
									text: line.split(' ')[0]
									font.pointSize: 9
									id: id
									wrapMode: Text.NoWrap
								}
								Text {
									wrapMode: Text.NoWrap
									color: parent.ListView.isCurrentItem ? "white" : "black"
									text: line.replace(line.split(' ')[0], '')
									anchors.left: id.right
									font.pointSize: 9
								}
							}
						}
					}

					Rectangle {
						Layout.fillWidth: true
						height: parent.height //- 2 * stateListContainer.border.width
						color: "transparent"
						ColumnLayout
						{
							width: parent.width
							anchors.fill: parent
							spacing: 0
							DebugBasicInfo {
								id: currentStep
								titleStr: qsTr("Current Step")
								Layout.fillWidth: true
								height: 30
							}
							DebugBasicInfo {
								id: mem
								titleStr: qsTr("Adding Memory")
								Layout.fillWidth: true
								height: 30
							}
							DebugBasicInfo {
								id: stepCost
								titleStr: qsTr("Step Cost")
								Layout.fillWidth: true
								height: 30
							}
							DebugBasicInfo {
								id: gasSpent
								titleStr: qsTr("Total Gas Spent")
								Layout.fillWidth: true
								height: 30
							}
							DebugInfoList
							{
								Layout.fillHeight: true
								Layout.fillWidth: true
								id: stack
								collapsible: false
								title : qsTr("Stack")
								itemDelegate: Item {
									id: renderedItem
									height: 25
									width: parent.width
									RowLayout
									{
										anchors.fill: parent
										Rectangle
										{
											id: indexColumn
											color: "#f7f7f7"
											Layout.fillWidth: true
											Layout.minimumWidth: 30
											Layout.preferredWidth: 30
											Layout.maximumWidth: 30
											Layout.minimumHeight: parent.height
											Text {
												anchors.centerIn: parent
												anchors.leftMargin: 5
												font.family: "monospace"
												color: "#4a4a4a"
												text: model.index;
												font.pointSize: 9
											}
										}

										Rectangle
										{
											anchors.left: indexColumn.right
											Layout.fillWidth: true
											Layout.minimumWidth: 15
											Layout.preferredWidth: 15
											Layout.maximumWidth: 60
											Layout.minimumHeight: parent.height
											Text {
												anchors.left: parent.left
												anchors.leftMargin: 5
												font.family: "monospace"
												anchors.verticalCenter: parent.verticalCenter
												color: "#4a4a4a"
												text: modelData
												font.pointSize: 9
											}
										}
									}

									Rectangle {
									   id: separator
									   width: parent.width;
									   height: 1;
									   color: "#cccccc"
									   anchors.bottom: parent.bottom
									 }
								}
							}
						}
					}
				}

				SplitView
				{
					id: splitInfoList
					Layout.fillHeight: true
					Layout.fillWidth: true

					Settings {
						id: splitSettings
						property alias storageHeightSettings: storageRect.height
						property alias memoryDumpHeightSettings: memoryRect.height
						property alias callDataHeightSettings: callDataRect.height
					}

					orientation: Qt.Vertical
					width: debugPanel.width - 2 * machineStates.sideMargin
					Rectangle
					{
						id: storageRect
						color: "transparent"
						width: parent.width
						Layout.minimumHeight: 25
						Layout.maximumHeight: 223
						height: 25
						DebugInfoList
						{
							id: storage
							anchors.fill: parent
							collapsible: true
							title : qsTr("Storage")
							itemDelegate:
								Item {
								height: 27
								width: parent.width;
								RowLayout
								{
									id: row
									width: parent.width
									height: 26
									Rectangle
									{
										color: "#f7f7f7"
										Layout.fillWidth: true
										Layout.minimumWidth: parent.width / 2
										Layout.preferredWidth: parent.width / 2
										Layout.maximumWidth: parent.width / 2
										Layout.minimumHeight: parent.height
										Layout.maximumHeight: parent.height
										Text {
											anchors.verticalCenter: parent.verticalCenter
											anchors.left: parent.left
											font.family: "monospace"
											anchors.leftMargin: 5
											color: "#4a4a4a"
											text: modelData.split(' ')[0].substring(0, 10);
											font.pointSize: 9
										}
									}
									Rectangle
									{
										color: "transparent"
										Layout.fillWidth: true
										Layout.minimumWidth: parent.width / 2
										Layout.preferredWidth: parent.width / 2
										Layout.maximumWidth: parent.width / 2
										Layout.minimumHeight: parent.height
										Layout.maximumHeight: parent.height
										Text {
											anchors.leftMargin: 5
											width: parent.width - 5
											wrapMode: Text.Wrap
											anchors.left: parent.left
											font.family: "monospace"
											anchors.verticalCenter: parent.verticalCenter
											color: "#4a4a4a"
											text: modelData.split(' ')[1].substring(0, 10);
											font.pointSize: 9
										}
									}
								}

								Rectangle {
									anchors.top: row.bottom
									width: parent.width;
									height: 1;
									color: "#cccccc"
									anchors.bottom: parent.bottom
								}
							}
						}
					}

					Rectangle
					{
						id: memoryRect;
						color: "transparent"
						height: 25
						width: parent.width
						Layout.minimumHeight: 25
						Layout.maximumHeight: 223
						DebugInfoList {
							id: memoryDump
							anchors.fill: parent
							collapsible: true
							title: qsTr("Memory Dump")
							itemDelegate:
								Item {
								height: 29
								width: parent.width - 3;
								ItemDelegateDataDump {}
							}
						}
					}

					Rectangle
					{
						id: callDataRect
						color: "transparent"
						height: 25
						width: parent.width
						Layout.minimumHeight: 25
						Layout.maximumHeight: 223
						DebugInfoList {
							id: callDataDump
							anchors.fill: parent
							collapsible: true
							title: qsTr("Call Data")
							itemDelegate:
								Item {
								height: 29
								width: parent.width - 3;
								ItemDelegateDataDump {}
							}
						}
					}
					Rectangle
					{
						width: parent.width
						Layout.minimumHeight: 25
						color: "transparent"
					}
				}
			}
		}
	}
}