import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

ColumnLayout {
	id: root
	anchors.margins: 3
	spacing: 3

	signal startTest(string testName)

	Component {
		id: myDataComponent

		QtObject {
			property string name
			property bool passed
		}
	}

	property var testListModel: [
		{
			"title": "Video tests",
			"tests": [
				myDataComponent.createObject(null, {name: "Video Test 1920x1200", passed: false}),
				{
					"name" : "Video Test 1280x800",
					"passed" : true
				},
				{
					"name" : "Video Test 800x480",
					"passed" : false
				}
			]
		}
	]

	Frame {

		ListView {

			implicitWidth:  600
			implicitHeight: 500

			clip: true
			anchors.fill: parent

			model: testListModel

			delegate: Column {
				property bool showList: false
				anchors.left: parent.left
				anchors.right: parent.right
				Button {
					anchors.left: parent.left
					anchors.right: parent.right
					text: modelData.title
					onClicked: paneTestList.shown = !paneTestList.shown
				}

				Pane {
					id: paneTestList
					property  bool shown: false
					visible: height > 0
					height: shown ? implicitHeight: 0
					Behavior on height {
						NumberAnimation {
							easing.type: Easing.InOutQuad
						}
					}

					clip: true
					anchors.left: parent.left
					anchors.right: parent.right

					Column {
						anchors.left: parent.left
						anchors.right: parent.right
						spacing: 3

						Repeater {
							id: testList
							model: modelData.tests
							anchors.fill: parent

							delegate: RowLayout {
								anchors.left: parent.left
								anchors.right: parent.right
								spacing: 10

								Rectangle {
									implicitHeight: 40
									implicitWidth: 40
									Image {
										source: "start.png"
										fillMode: Image.PreserveAspectFit

										anchors.centerIn: parent
										anchors.fill: parent

										height: sourceSize.height

									}
									MouseArea {
										anchors.fill: parent
										onClicked: {
											console.log("Button pressed!!!" + modelData.name)
											modelData.passed = true
											//testListModelChanged()
											modelDataChanged()
											console.log("Data has been changed: " + modelData.passed)

											modelData.name = "PassedBlahBlah"
											console.log("New name = " + modelData.name)
										}
									}
								}

								Label {
									text: modelData.name
									Layout.fillWidth: true
								}

								Rectangle {
									implicitHeight: 40
									implicitWidth: 40
									Image {
										source: {
											modelData.passed ? "passed.png" : "failed.png"
										}
										fillMode: Image.PreserveAspectFit

										anchors.centerIn: parent
										anchors.fill: parent
										//sourceSize.height: button.background.height - 6
										//height: sourceSize.height
									}
								}
							}
						}
					}
				}
			}

		}
	}
}