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

Rectangle {
    id: root
    height: 56
    color: Backend.lightMode ? "#F5F7F5" : "#2B2F2B"

    Material.theme: Backend.lightMode ? Material.Light : Material.Dark
    Material.accent: Material.Green
    Material.primary: Material.Green

    Rectangle {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 1
        color: Qt.rgba(0, 0, 0, 0.08)
    }

    RowLayout {
        anchors.fill: parent
        anchors.leftMargin: 16
        anchors.rightMargin: 16
        spacing: 14

        Label {
            text: "Tactile IPC 3D"
            font.pixelSize: 18
            font.weight: Font.DemiBold
            color: Material.color(Material.Green)
        }

        Item { Layout.fillWidth: true }

        RowLayout {
            spacing: 6
            Layout.alignment: Qt.AlignVCenter

            Rectangle {
                width: 10
                height: 10
                radius: 5
                color: Backend.connected ? "#2e7d32" : "#d32f2f"
            }

            Label {
                text: Qt.binding(function() {
                    I18n.retranslateToken
                    return Backend.connected ? qsTr("CONNECTED") : qsTr("DISCONNECTED")
                })
                font.pixelSize: 12
                font.weight: Font.DemiBold
                color: Backend.connected ? "#2e7d32" : "#d32f2f"
            }
        }

        Switch {
            id: themeSwitch
            text: Qt.binding(function() {
                I18n.retranslateToken
                return Backend.lightMode ? qsTr("Light") : qsTr("Dark")
            })
            checked: Backend.lightMode
            onCheckedChanged: Backend.lightMode = checked
        }

        ComboBox {
            id: langBox
            implicitHeight: 32
            leftPadding: 10
            rightPadding: 26
            Layout.alignment: Qt.AlignVCenter
            model: [
                { text: "中文", value: "zh_CN", icon: "qrc:/images/china.png" },
                { text: "English", value: "en_US", icon: "qrc:/images/united-states.png" }
            ]
            textRole: "text"
            delegate: ItemDelegate {
                width: langBox.width
                height: 28
                onClicked: {
                    langBox.currentIndex = index
                    langBox.popup.close()
                }
                contentItem: Row {
                    spacing: 8
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 8
                    Image {
                        width: 18
                        height: 12
                        fillMode: Image.PreserveAspectFit
                        source: modelData.icon
                    }
                    Label {
                        text: modelData.text
                        font: langBox.font
                    }
                }
            }
            contentItem: Item {
                anchors.fill: parent
                Row {
                    spacing: 8
                    anchors.verticalCenter: parent.verticalCenter
                    Image {
                        width: 18
                        height: 12
                        fillMode: Image.PreserveAspectFit
                        source: langBox.model[langBox.currentIndex]
                                ? langBox.model[langBox.currentIndex].icon
                                : ""
                    }
                    Label {
                        text: langBox.displayText
                        font: langBox.font
                        verticalAlignment: Text.AlignVCenter
                    }
                }
            }
            popup: Popup {
                y: langBox.height
                width: langBox.width
                implicitHeight: contentItem.implicitHeight
                padding: 0
                modal: false
                focus: true
                closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
                popupType: Popup.Window
                contentItem: ListView {
                    implicitHeight: contentHeight
                    model: langBox.delegateModel
                    currentIndex: langBox.highlightedIndex
                    delegate: langBox.delegate
                    clip: true
                }
            }
            function syncLanguage() {
                for (let i = 0; i < model.length; i++) {
                    if (model[i].value === Backend.language) {
                        if (currentIndex !== i)
                            currentIndex = i
                        return
                    }
                }
            }
            Component.onCompleted: syncLanguage()
            Connections {
                target: Backend
                function onLanguageChanged() {
                    langBox.syncLanguage()
                }
            }
            onCurrentIndexChanged: {
                if (model[currentIndex])
                    Backend.language = model[currentIndex].value
            }
        }
    }
}