import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
import "./"

Page {
    id: root

    signal pageOpened()

    ColumnLayout {
        id: column
        spacing: 5
        width: parent.width
        anchors.fill: parent
        anchors.topMargin: parent.height * 0.02
        anchors.bottomMargin: parent.height * 0.02

        onSpacingChanged: console.log(parent.width)

        Label {
            id: heading
            font.pixelSize: parent.width * 0.075
            text: "Calculator"
            Layout.fillWidth: true
            Layout.leftMargin: parent.width * 0.5 - width * 0.5
            Layout.rightMargin: parent.width * 0.5 - width * 0.5
        }


        TextField {
            id: tickInterval
            text: calculator.tickInterval
            placeholderText: "interval"
            horizontalAlignment: Qt.AlignHCenter
            Layout.fillWidth: true
            Layout.leftMargin: parent.width * 0.05
            Layout.rightMargin: parent.width * 0.05
        }

        TextField {
            id: numCount
            text: calculator.numCount
            placeholderText: "numbercount"
            horizontalAlignment: Qt.AlignHCenter
            Layout.fillWidth: true
            Layout.leftMargin: parent.width * 0.05
            Layout.rightMargin: parent.width * 0.05
        }

        TextField {
            id: min
            text: calculator.min
            placeholderText: "min"
            horizontalAlignment: Qt.AlignHCenter
            Layout.fillWidth: true
            Layout.leftMargin: parent.width * 0.05
            Layout.rightMargin: parent.width * 0.05
        }

        TextField {
            id: max
            text: calculator.max
            placeholderText: "max"
            horizontalAlignment: Qt.AlignHCenter
            Layout.fillWidth: true
            Layout.leftMargin: parent.width * 0.05
            Layout.rightMargin: parent.width * 0.05
        }

        RoundButton {
            id: startButton
            text: "start"
            height: parent.width * 0.1
            width: height
            //font.pixelSize: parent.width * 0.03
            Layout.fillWidth: true
            Layout.leftMargin: parent.width * 0.05
            Layout.rightMargin: parent.width * 0.05
            onClicked: {
                updateVars()
                calculator.start()
            }
        }
    }
    function updateVars() {
        calculator.tickInterval = tickInterval.text
        calculator.numCount = numCount.text
        calculator.min = min.text
        calculator.max = max.text

    }
}