import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import RaveOS 1.0
import "." as WifiModule

Rectangle {
    id: root
    color: Stilus.hatter

    readonly property var t: WifiModule.Translations
    property var kivalasztott: null
    property bool rejtett: false
    property bool csatlakozik: false
    property bool sikertelen: false
    property bool jelszoLatszik: false

    readonly property string ssid: rejtett ? ssidMezo.text : (kivalasztott ? kivalasztott.ssid : "")
    readonly property bool jelszoKell: rejtett || (kivalasztott !== null && kivalasztott.secured)

    function updateLanguage() {
        WifiModule.Translations.setLanguage(systemLocale)
    }

    function savok(erosseg) {
        if (erosseg >= 75) return 4
        if (erosseg >= 50) return 3
        if (erosseg >= 25) return 2
        return 1
    }

    function allapotSzoveg() {
        if (nm.connected) return t.statusConnected
        if (csatlakozik) return t.statusConnecting
        if (sikertelen) return t.statusFailed
        return t.statusDisconnected
    }

    Component.onCompleted: WifiModule.Translations.setLanguage(systemLocale)

    Connections {
        target: nm
        function onConnectionChanged() {
            if (nm.connected)
                root.csatlakozik = false
        }
        function onConnectionFailed(error) {
            root.csatlakozik = false
            root.sikertelen = true
        }
    }

    Timer {
        interval: 30000
        running: root.csatlakozik
        onTriggered: {
            if (!nm.connected) {
                root.csatlakozik = false
                root.sikertelen = true
            }
        }
    }

    component SzovegLink: Text {
        signal kattint()
        color: linkHover.hovered ? Stilus.zoldHover : Stilus.zold
        font.family: Stilus.font
        font.pixelSize: 13
        font.weight: Font.DemiBold

        HoverHandler {
            id: linkHover
            cursorShape: Qt.PointingHandCursor
        }

        TapHandler {
            onTapped: parent.kattint()
        }
    }

    ColumnLayout {
        anchors.fill: parent
        anchors.topMargin: 40
        anchors.bottomMargin: 32
        anchors.leftMargin: 56
        anchors.rightMargin: 56
        spacing: 20

        ColumnLayout {
            Layout.fillWidth: true
            spacing: 10

            Fejlec {
                Layout.fillWidth: true
                felirat: root.t.eyebrow
                cim: root.t.title
            }

            Text {
                Layout.fillWidth: true
                text: root.t.subtitle
                wrapMode: Text.WordWrap
                color: Stilus.szovegMasodlagos
                font.family: Stilus.font
                font.pixelSize: 14
            }
        }

        RowLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            spacing: 24

            ColumnLayout {
                Layout.fillWidth: true
                Layout.fillHeight: true
                spacing: 8

                RowLayout {
                    Layout.fillWidth: true

                    Text {
                        Layout.fillWidth: true
                        text: root.t.availableNetworks
                        color: Stilus.szovegHalvany
                        font.family: Stilus.font
                        font.pixelSize: 12
                        font.weight: Font.Medium
                        font.letterSpacing: 1
                        font.capitalization: Font.AllUppercase
                    }

                    SzovegLink {
                        text: root.t.refresh
                        onKattint: nm.scan()
                    }
                }

                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: Stilus.felulet
                    border.width: 1
                    border.color: Stilus.keret

                    ListView {
                        id: lista
                        anchors.fill: parent
                        anchors.margins: 1
                        clip: true
                        model: nm.accessPoints
                        boundsBehavior: Flickable.StopAtBounds
                        ScrollBar.vertical: Gorgeto {}

                        delegate: Rectangle {
                            id: sor
                            readonly property bool kijelolt: !root.rejtett && root.kivalasztott !== null && root.kivalasztott.ssid === modelData.ssid
                            width: lista.width
                            height: 48
                            color: kijelolt ? Stilus.aktiv : (sorHover.hovered ? Stilus.aktiv : "transparent")

                            Rectangle {
                                anchors.left: parent.left
                                anchors.right: parent.right
                                anchors.bottom: parent.bottom
                                height: 1
                                color: Stilus.aktiv
                            }

                            Rectangle {
                                visible: sor.kijelolt
                                anchors.left: parent.left
                                anchors.top: parent.top
                                anchors.bottom: parent.bottom
                                width: 2
                                color: Stilus.zold
                            }

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

                                Row {
                                    Layout.alignment: Qt.AlignVCenter
                                    spacing: 2
                                    height: 14

                                    Repeater {
                                        model: 4
                                        Rectangle {
                                            anchors.bottom: parent.bottom
                                            width: 3
                                            height: 4 + index * 3.3
                                            color: index < root.savok(modelData.strength)
                                                ? (sor.kijelolt ? Stilus.zold : Stilus.szoveg)
                                                : Stilus.keretErosebb
                                        }
                                    }
                                }

                                Text {
                                    Layout.fillWidth: true
                                    text: modelData.ssid
                                    elide: Text.ElideRight
                                    color: Stilus.szoveg
                                    font.family: Stilus.font
                                    font.pixelSize: 14
                                    font.weight: sor.kijelolt ? Font.DemiBold : Font.Normal
                                }

                                Canvas {
                                    visible: modelData.secured
                                    Layout.preferredWidth: 14
                                    Layout.preferredHeight: 14
                                    Accessible.name: root.t.secured
                                    onPaint: {
                                        var c = getContext("2d")
                                        c.reset()
                                        c.strokeStyle = Stilus.szovegHalvany
                                        c.lineWidth = 1.5
                                        c.strokeRect(3, 6.5, 8, 6)
                                        c.beginPath()
                                        c.moveTo(4.5, 6.5)
                                        c.lineTo(4.5, 4.5)
                                        c.arc(7, 4.5, 2.5, Math.PI, 0)
                                        c.lineTo(9.5, 6.5)
                                        c.stroke()
                                    }
                                }

                                Text {
                                    Layout.preferredWidth: 52
                                    horizontalAlignment: Text.AlignRight
                                    text: modelData.band
                                    color: Stilus.szovegHalvany
                                    font.family: Stilus.mono
                                    font.pixelSize: 11
                                }
                            }

                            HoverHandler { id: sorHover }

                            TapHandler {
                                onTapped: {
                                    root.rejtett = false
                                    root.sikertelen = false
                                    root.kivalasztott = modelData
                                    jelszoMezo.text = ""
                                }
                            }
                        }

                        Text {
                            anchors.centerIn: parent
                            width: parent.width - 40
                            visible: lista.count === 0
                            text: root.t.noNetworks
                            horizontalAlignment: Text.AlignHCenter
                            wrapMode: Text.WordWrap
                            color: Stilus.szovegHalvany
                            font.family: Stilus.font
                            font.pixelSize: 13
                        }
                    }
                }

                SzovegLink {
                    text: root.t.hiddenNetwork
                    onKattint: {
                        root.rejtett = true
                        root.kivalasztott = null
                        root.sikertelen = false
                    }
                }
            }

            Rectangle {
                Layout.preferredWidth: 300
                Layout.alignment: Qt.AlignTop
                implicitHeight: panel.implicitHeight + 36
                color: Stilus.felulet
                border.width: 1
                border.color: Stilus.keret

                ColumnLayout {
                    id: panel
                    x: 18
                    y: 18
                    width: parent.width - 36
                    spacing: 14

                    Text {
                        text: root.t.selected
                        color: Stilus.szovegHalvany
                        font.family: Stilus.font
                        font.pixelSize: 12
                        font.letterSpacing: 1
                        font.capitalization: Font.AllUppercase
                    }

                    Text {
                        visible: !root.rejtett
                        Layout.fillWidth: true
                        text: root.kivalasztott ? root.kivalasztott.ssid : root.t.noSelection
                        elide: Text.ElideRight
                        color: root.kivalasztott ? Stilus.szoveg : Stilus.szovegHalvany
                        font.family: Stilus.font
                        font.pixelSize: root.kivalasztott ? 16 : 13
                        font.weight: root.kivalasztott ? Font.DemiBold : Font.Normal
                    }

                    ColumnLayout {
                        visible: root.rejtett
                        Layout.fillWidth: true
                        spacing: 6

                        Text {
                            text: root.t.ssidLabel
                            color: Stilus.szovegHalvany
                            font.family: Stilus.font
                            font.pixelSize: 12
                        }

                        TextField {
                            id: ssidMezo
                            Layout.fillWidth: true
                            implicitHeight: 44
                            leftPadding: 12
                            color: Stilus.szoveg
                            font.family: Stilus.font
                            font.pixelSize: 14
                            background: Rectangle {
                                color: Stilus.hatter
                                border.width: 1
                                border.color: ssidMezo.activeFocus ? Stilus.zold : Stilus.keretErosebb
                            }
                        }
                    }

                    ColumnLayout {
                        visible: root.jelszoKell
                        Layout.fillWidth: true
                        spacing: 6

                        Text {
                            text: root.t.password
                            color: Stilus.szovegHalvany
                            font.family: Stilus.font
                            font.pixelSize: 12
                        }

                        JelszoMezo {
                            id: jelszoMezo
                            Layout.fillWidth: true
                            reveal: root.jelszoLatszik
                            revealName: root.t.showPassword
                            onRevealClicked: root.jelszoLatszik = !root.jelszoLatszik
                            onAccepted: csatlakozGomb.clicked()
                        }
                    }

                    Button {
                        id: csatlakozGomb
                        Layout.fillWidth: true
                        implicitHeight: 44
                        text: root.t.connect
                        enabled: root.ssid !== "" && (!root.jelszoKell || jelszoMezo.text !== "") && !root.csatlakozik
                        onClicked: {
                            if (!enabled)
                                return
                            root.sikertelen = false
                            root.csatlakozik = true
                            nm.connectTo(root.ssid, root.jelszoKell ? jelszoMezo.text : "")
                        }
                        background: Rectangle {
                            color: !csatlakozGomb.enabled ? "transparent" : (csatlakozGomb.hovered ? Stilus.zoldHover : Stilus.zold)
                            border.width: csatlakozGomb.enabled ? 0 : 1
                            border.color: Stilus.keret
                        }
                        contentItem: Text {
                            text: csatlakozGomb.text
                            color: csatlakozGomb.enabled ? Stilus.zoldonSzoveg : Stilus.szovegHalvany
                            font.family: Stilus.font
                            font.pixelSize: 14
                            font.weight: Font.DemiBold
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                        }
                    }

                    Text {
                        Layout.fillWidth: true
                        text: root.t.statusLabel + ": " + root.allapotSzoveg()
                        wrapMode: Text.WordWrap
                        color: nm.connected ? Stilus.zold : (root.sikertelen ? Stilus.sarga : Stilus.szovegHalvany)
                        font.family: Stilus.mono
                        font.pixelSize: 12
                    }
                }
            }
        }
    }
}