import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Flow{
    anchors.fill: parent
    spacing: 0

    //Connections
    Connections{
        target: window

        onClicked1: {
            console.log("Reciever","onClicked1 in connection","Do something")
        }
    }

    Rectangle{
        width: parent.width/2
        height: parent.height/2
        border.color: "#F5F5F5"

        ColumnLayout{
            anchors.fill: parent

            Button{
                Layout.alignment: Qt.AlignHCenter
                highlighted: true
                text: "Click"

                onClicked: {
                    window.clicked1()
                    ApplicationBridge.action1()
                }
            }
        }
    }
    Rectangle{
        width: parent.width/2
        height: parent.height/2
        border.color: "#F5F5F5"
        ColumnLayout{
            anchors.centerIn: parent

            TextField{
                id: textfield
                Layout.alignment: Qt.AlignHCenter
                Layout.preferredHeight: 48
                text: ApplicationBridge.inputForCpp

                onTextChanged: {
                    ApplicationBridge.inputForCpp= text
                }
            }

            Label{
                Layout.fillWidth: true
                Layout.preferredWidth: textfield.width
                Layout.preferredHeight: 48
                wrapMode: "WrapAnywhere"
                elide: "ElideRight"
                maximumLineCount: 3

                //value
                text: "C++ Property: " + ApplicationBridge.inputForCpp
            }
        }
    }
    Rectangle{
        width: parent.width/2
        height: parent.height/2
        border.color: "#F5F5F5"
        ColumnLayout{
            anchors.fill: parent

            ColumnLayout{
                anchors.centerIn: parent

                Label{
                    id: clockLabel
                    Layout.preferredHeight: 48
                    wrapMode: "WrapAnywhere"
                    elide: "ElideRight"
                    maximumLineCount: 3

                    Connections{
                        target: ApplicationBridge

                        onTimeChanged: {
                            clockLabel.text= "C++ Clock: " + dateFromCPP
                        }
                    }
                }
            }
        }
    }
    Rectangle{
        width: parent.width/2
        height: parent.height/2
        border.color: "#F5F5F5"
        ListView{
            anchors.fill: parent
            spacing: 2
            clip: true
            header: Label{
                width: parent.width
                text: "C++ Data model"
                horizontalAlignment: "AlignHCenter"
            }

            model: ApplicationBridge.list
            delegate: Rectangle{
                id: modelDelegate
                width: parent.width
                height: 48
                color: modelData.color

                Label{
                    anchors.fill: parent
                    text: modelData.name
                    horizontalAlignment: "AlignHCenter"
                    verticalAlignment: "AlignVCenter"
                    color: "white"
                }
            }
        }
    }
}