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)

    property var testListModel: [
        {
            "title": "Video tests",
            "tests": [
                {
                    "name" : "Video Test 1920x1200",
                    "passed" : false
                },
                {
                    "name" : "Video Test 1280x800",
                    "passed" : true
                },
                {
                    "name" : "Video Test 800x480",
                    "passed" : false
                }

                /*
                qsTr("Video Test 1920x1200"),
                qsTr("Video Test 1280x800"),
                qsTr("Video Test 800x480")*/
            ]
        }
        /*,
        {
            "title": "Audio tests",
            "tests": [
                qsTr("Microphone"),
                qsTr("Speaker")
            ]
        },
        {
            "title": "Misc",
            "tests": [
                qsTr("Ethernet"),
                qsTr("USB"),
                qsTr("SD Card"),
                qsTr("LED Test"),

            ]
        }*/
    ]

    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
                                    }
                                }
                            }
                        }
                    }
                }



                /*
                RowLayout {
                    width: parent.width
                    CheckBox {
                        checked: true
                    }
                    Label {
                        text: "Some text"
                    }
                    Button {
                        text: "Test"
                    }
                }*/
            }

        }
    }
    /*
    Button {
        text: "Start the test"
        onPressed: {
            startTest("myTest")
        }
    }
    */

}