import QtQuick 2.0
import Ubuntu.Components 0.1

Rectangle {
	id: root
	width: units.gu(31)
	height: units.gu(34)
	color: "lightgray"

	property real margins: units.gu(2)
	property real buttonWidth: units.gu(9)
	property real smallButtonWidth: units.gu(6)


	Button {
		id: oneButton
		width: buttonWidth
		text: "1"
		anchors.margins: margins
		anchors.top: displayBox.bottom

		// put 1 on display box
		onClicked: displayBox.text = displayBox.text + "1"
	}
	
	Button {
		id: twoButton
		width: buttonWidth
		text: "2"
		anchors.left: oneButton.right
		anchors.top: displayBox.bottom
		anchors.margins: margins
		
		// put 2 on display box
		onClicked: displayBox.text = displayBox.text + "2"
	}


	Button {
		id: threeButton
		width: buttonWidth
		text: "3"
		anchors.left: twoButton.right
		anchors.top: displayBox.bottom
		anchors.margins: margins 

		
		// put 3 on display box
		onClicked: displayBox.text = displayBox.text + "3"
 
	}

	
	Button {
		id: fourButton
		width: buttonWidth
		text: "4"
		anchors.top: oneButton.bottom
		anchors.margins: margins
		
		// put 4 on display box
		onClicked: displayBox.text = displayBox.text + "4"
	}


	Button {
		id: fiveButton
		width: buttonWidth
		text: "5"
		anchors.top: twoButton.bottom
		anchors.left: fourButton.right
		anchors.margins: margins
		
		// put 5 on display box
		onClicked: displayBox.text = displayBox.text + "5"
	}
	
	Button {
		id: sixButton
		width: buttonWidth
		text: "6"
		anchors.top: threeButton.bottom
		anchors.left: fiveButton.right
		anchors.margins: margins
		
		// put 6 on display box
		onClicked: displayBox.text = displayBox.text + "6"
	}

	Button {
		id: sevenButton
		width: buttonWidth
		text: "7"
		anchors.top: fourButton.bottom
		anchors.margins: margins
		
		// put 7 on display box
		onClicked: displayBox.text = displayBox.text + "7"
	}
	
	
	Button {
		id: eightButton
		width: buttonWidth
		text: "8"
		anchors.left: sevenButton.right 
		anchors.top: fiveButton.bottom
		anchors.margins: margins
		
		// put 8 on display box
		onClicked: displayBox.text = displayBox.text + "8"
	}

	Button {
		id: nineButton
		width: buttonWidth
		text: "9"
		anchors.left: eightButton.right
		anchors.top: sixButton.bottom
		anchors.margins: margins
		
		// put 9 on display box
		onClicked: displayBox.text = displayBox.text + "9"
	}

	Button {
		id: zeroButton
		width: buttonWidth
		text: "0"
		anchors.top: sevenButton.bottom
		anchors.margins: margins
		
		// put 0 on display box
		onClicked: displayBox.text = displayBox.text + "0"
	}

	Button {
		id: clearButton
		width: buttonWidth
		text: "Clear"
		anchors.top: eightButton.bottom
		anchors.left : zeroButton.right
		anchors.margins: margins
	
		// clear the display box	
		onClicked: displayBox.text = ""
	}

	Button {
		id: equalButton
		width: buttonWidth
		text: "="
		anchors.top: nineButton.bottom
		anchors.left : clearButton.right
		anchors.margins: margins

		// call calculate
		onClicked: calculate()
	}

	Button {
		id: addButton
		width: smallButtonWidth
		text: "+"
		anchors.top: zeroButton.bottom
		anchors.margins: margins 
		
		// put add (+) on display box
		onClicked: displayBox.text = displayBox.text + " + "
	}

	Button {
		id: subtractButton
		width: smallButtonWidth
		text: "-"
		anchors.top: clearButton.bottom
		anchors.left: addButton.right
		anchors.margins: margins 
		
		// put subtract (-) on display box
		onClicked: displayBox.text = displayBox.text + " - "
	}

	Button {
		id: multiplyButton
		width: smallButtonWidth
		text: "*"
		anchors.top: equalButton.bottom
		anchors.left: subtractButton.right
		anchors.margins: margins 

		// put * on display box
		onClicked: displayBox.text = displayBox.text + " * "
	}

	Button {
		id: divideButton
		width: smallButtonWidth
		text: "/"
		anchors.top: equalButton.bottom
		anchors.left: multiplyButton.right
		anchors.margins: margins 

		// put divide (/) on display box
		onClicked: displayBox.text = displayBox.text + " / "
	}
	
	
	TextField {
		id: displayBox
		width: parent.width
		height: 30
		anchors.margins: margins

		// Here's the logic
		onTextChanged: {
			console.log(displayBox.text)
		}

		Keys.onPressed: {
			console.log("displayBox enters")
			calculate();
		}
	}	

	// Lets calculate the values
	function calculate() {
		console.log("Calculate: " + eval(displayBox.text));
		displayBox.text = eval(displayBox.text);	
	}
}