import QtQuick
import QtQuick.Controls.Material
import QtQuick.Controls
import QtQuick.Layouts
import QtQml
import "."
import TactileIPC 1.0

Pane {
    id: root
    Material.theme: darkModeToggle.checked ? Material.Dark : Material.Light
    Material.accent: Material.Green
    leftPadding: 18
    rightPadding: 18
    topPadding: 18
    bottomPadding: 18

    ColumnLayout {
        anchors.fill: parent
        spacing: 14

        Toggle {
            id: darkModeToggle
            text: Qt.binding(function() {
                I18n.retranslateToken
                return qsTr("Dark mode")
            })
        }

        GroupBox {
            title: Qt.binding(function() {
                I18n.retranslateToken
                return qsTr("Render")
            })
            Layout.fillWidth: true

            ColumnLayout {
                anchors.fill: parent
                spacing: 10

                RowLayout {
                    Layout.fillWidth: true
                    Label {
                        text: Qt.binding(function() {
                            I18n.retranslateToken
                            return qsTr("Mode")
                        })
                        Layout.alignment: Qt.AlignVCenter
                    }
                    ComboBox {
                        id: renderModeBox
                        Layout.fillWidth: true
                        model: ["dataViz", "realistic"]
                        Component.onCompleted: currentIndex = Backend.renderMode === "realistic" ? 1 : 0
                        onActivated: Backend.renderMode = currentText
                        Connections {
                            target: Backend
                            function onRenderModeChanged() {
                                renderModeBox.currentIndex = Backend.renderMode === "realistic" ? 1 : 0
                            }
                        }
                    }
                }

                RowLayout {
                    Layout.fillWidth: true
                    Label {
                        text: Qt.binding(function() {
                            I18n.retranslateToken
                            return qsTr("Labels")
                        })
                        Layout.alignment: Qt.AlignVCenter
                    }
                    ComboBox {
                        id: labelModeBox
                        Layout.fillWidth: true
                        model: ["off", "hover", "always"]
                        Component.onCompleted: {
                            if (Backend.labelMode === "always") labelModeBox.currentIndex = 2
                            else if (Backend.labelMode === "hover") labelModeBox.currentIndex = 1
                            else labelModeBox.currentIndex = 0
                        }
                        onActivated: Backend.labelMode = currentText
                        Connections {
                            target: Backend
                            function onLabelModeChanged() {
                                if (Backend.labelMode === "always") labelModeBox.currentIndex = 2
                                else if (Backend.labelMode === "hover") labelModeBox.currentIndex = 1
                                else labelModeBox.currentIndex = 0
                            }
                        }
                    }
                }

                Toggle {
                    id: legendToggle
                    text: Qt.binding(function() {
                        I18n.retranslateToken
                        return qsTr("Legend")
                    })
                    checked: Backend.showLegend
                    onCheckedChanged: Backend.showLegend = checked
                }
            }
        }

        GroupBox {
            title: Qt.binding(function() {
                I18n.retranslateToken
                return qsTr("Scale")
            })
            Layout.fillWidth: true

            ColumnLayout {
                anchors.fill: parent
                spacing: 10

                RowLayout {
                    Layout.fillWidth: true
                    Label {
                        text: Qt.binding(function() {
                            I18n.retranslateToken
                            return qsTr("Min")
                        })
                        Layout.alignment: Qt.AlignVCenter
                    }
                    SpinBox {
                        id: minBox
                        Layout.fillWidth: true
                        from: -999999
                        to: 999999
                        value: Backend.minValue
                        onValueModified: Backend.minValue = value
                    }
                }

                RowLayout {
                    Layout.fillWidth: true
                    Label {
                        text: Qt.binding(function() {
                            I18n.retranslateToken
                            return qsTr("Max")
                        })
                        Layout.alignment: Qt.AlignVCenter
                    }
                    SpinBox {
                        id: maxBox
                        Layout.fillWidth: true
                        from: -999999
                        to: 999999
                        value: Backend.maxValue
                        onValueModified: Backend.maxValue = value
                    }
                }

                Legend {
                    Layout.alignment: Qt.AlignHCenter
                    visible: Backend.showLegend
                    minValue: Backend.minValue
                    maxValue: Backend.maxValue
                }
            }
        }

        Item { Layout.fillHeight: true }
    }
}