// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial

// This file is part of the Qt Safe Renderer module

import QtQuick
import QtQuick.Controls

Item {
    id: connectionItem
    width: 120
    height: 35
    y: 325

    property bool connectionState: clusterDataControl.connectionBool
    property var telltalesHostPort: clusterDataControl.TELLTALES_HOST_PORT
    property var clusterPort: clusterDataControl.CLUSTER_PORT

    RegularExpressionValidator {
        id: ipValidator
        regularExpression: /^(\d{1,3}\.){3}\d{1,3}$/
    }

    TextField {
        id: ipField
        y: 10
        width: connectionItem.width - 20
        height: 25
        font.pixelSize: 13
        text: hostName
        placeholderText: "127.0.0.1"
        inputMethodHints: Qt.ImhNoPredictiveText // Disable auto-correction
        validator: ipValidator
        anchors.top: parent.top
    }

    TextField {
        id: portField
        y: ipField.bottom + 10
        width: connectionItem.width - 20
        height: 25
        font.pixelSize: 13
        text: backend.selectedExample === 0 ? clusterDataControl.telltalesHostPort : clusterDataControl.clusterPort
        inputMethodHints: Qt.ImhDigitsOnly
        validator: IntValidator { bottom: 0; top: 65535 }
        anchors.top: ipField.bottom
    }

    QtObject {
        id: backend
        property int selectedExample: 0
        property string selectedExampleText: "Telltales"
    }

    ComboBox {
        id: exampleComboBox
        width: connectionItem.width - 30
        height: 30
        y: -30
        model: ["Telltales", "Qt Cluster"]
        currentIndex: backend.selectedExample
        onCurrentIndexChanged: {
            backend.selectedExample = currentIndex;
            backend.selectedExampleText = currentText;
            portField.text = currentIndex === 0 ? clusterDataControl.telltalesHostPort : clusterDataControl.clusterPort;
            updateStatusTextAndColor();
        }
    }

    Button {
        id: connectButton
        x: 100
        y: portField.right + 10
        width: connectionItem.width - 20
        height: ipField.height + portField.height
        text: "Connect"
        enabled: ipField.acceptableInput && portField.acceptableInput
        onClicked: {
            clusterDataControl.establishConnection(ipField.text, portField.text)
        }
    }

    Text {
        id: statusValueText
        y: -24
        x: 105
        width: 80
        height: 30
        text: "Not Connected"
        font.pixelSize: 14
        horizontalAlignment: Text.AlignHCenter
        color: "#e41e25"
    }

    function updateStatusTextAndColor() {
        var telltalesState = clusterDataControl.telltalesConnectionState;
        var clusterState = clusterDataControl.clusterConnectionState;
        var selectedExample = backend.selectedExample;

        if (selectedExample === 0) { // Telltales
            if (telltalesState === 2) { // Connected
                statusValueText.text = "Connected";
                statusValueText.color = "#41cd52";
            } else if (telltalesState === 1) { // Connecting
                statusValueText.text = "Connecting..";
                statusValueText.color = "blue";
            } else { // Disconnected
                statusValueText.text = "Not Connected";
                statusValueText.color = "#e41e25";
            }
        } else if (selectedExample === 1) { // Qt Cluster
            if (clusterState === 2) { // Connected
                statusValueText.text = "Connected";
                statusValueText.color = "#41cd52";
            } else if (clusterState === 1) { // Connecting
                statusValueText.text = "Connecting..";
                statusValueText.color = "blue";
            } else { // Disconnected
                statusValueText.text = "Not Connected";
                statusValueText.color = "#e41e25";
            }
        }
    }

    Component.onCompleted: {
        clusterDataControl.telltalesConnectionStateChanged.connect(updateStatusTextAndColor);
        clusterDataControl.clusterConnectionStateChanged.connect(updateStatusTextAndColor);
        updateStatusTextAndColor();
    }

    Connections {
        target: clusterDataControl
        function onTelltalesConnectionStateChanged() {
            updateStatusTextAndColor();
        }
        function onClusterConnectionStateChanged() {
            updateStatusTextAndColor();
        }
    }
}