import io.calamares.core 1.0
import io.calamares.ui 1.0

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import "RaveOS"

Rectangle {
    id: hely
    color: Stilus.hatter

    readonly property string lcSor: config.currentLCCode || config.currentLanguageCode
    readonly property string lcKod: kod(lcSor)

    function szinkronRegio() {
        if (!config.currentLocation)
            return
        var i = regio.indexOfValue(config.currentLocation.region)
        if (i >= 0) {
            regio.currentIndex = i
            config.regionalZonesModel.region = config.currentLocation.region
            Qt.callLater(varosraGorget)
        }
    }

    function varosraGorget() {
        var m = config.regionalZonesModel
        for (var i = 0; i < m.rowCount(); ++i) {
            if (m.data(m.index(i, 0), Qt.UserRole) === config.currentLocation.zone) {
                varosok.positionViewAtIndex(i, ListView.Center)
                return
            }
        }
    }

    Connections {
        target: config
        function onCurrentLocationChanged() {
            hely.szinkronRegio()
        }
    }

    function kod(sor) {
        return (sor || "").split(" ")[0]
    }

    function nyelvNev(sor) {
        var k = kod(sor)
        var nev = Qt.locale(k.split(".")[0]).nativeLanguageName
        if (!nev)
            return k
        return nev.charAt(0).toUpperCase() + nev.slice(1) + " (" + k + ")"
    }

    function indexOf(lista, ertek) {
        for (var i = 0; i < lista.length; ++i) {
            if (lista[i] === ertek || kod(lista[i]) === kod(ertek))
                return i
        }
        return -1
    }

    component Cimke: Text {
        color: Stilus.szovegHalvany
        font.family: Stilus.font
        font.pixelSize: 12
    }

    component SzakaszCim: Text {
        color: Stilus.szovegHalvany
        font.family: Stilus.font
        font.pixelSize: 12
        font.weight: Font.Medium
        font.letterSpacing: 1
        font.capitalization: Font.AllUppercase
    }

    component ElonezetSor: RowLayout {
        property string nev: ""
        property string ertek: ""
        Layout.fillWidth: true
        spacing: 16

        Text {
            Layout.preferredWidth: 120
            text: parent.nev
            color: Stilus.szovegHalvany
            font.family: Stilus.mono
            font.pixelSize: 12
        }

        Text {
            Layout.fillWidth: true
            text: parent.ertek
            elide: Text.ElideRight
            color: Stilus.szoveg
            font.family: Stilus.mono
            font.pixelSize: 12
        }
    }

    ColumnLayout {
        anchors.fill: parent
        anchors.topMargin: 48
        anchors.bottomMargin: 32
        anchors.leftMargin: 56
        anchors.rightMargin: 56
        spacing: 28

        Fejlec {
            Layout.fillWidth: true
            felirat: qsTr("LOCATION")
            cim: qsTr("TIME ZONE AND FORMATS")
        }

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

            ColumnLayout {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.preferredWidth: 1
                spacing: 10

                SzakaszCim { text: qsTr("Time zone") }

                Cimke { text: qsTr("Region") }

                Valaszto {
                    id: regio
                    Layout.fillWidth: true
                    model: config.regionModel
                    textRole: "name"
                    valueRole: "key"
                    Component.onCompleted: hely.szinkronRegio()
                    onActivated: {
                        config.regionalZonesModel.region = currentValue
                        varosok.positionViewAtBeginning()
                    }
                }

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

                    ListView {
                        id: varosok
                        anchors.fill: parent
                        anchors.margins: 1
                        clip: true
                        model: config.regionalZonesModel
                        boundsBehavior: Flickable.StopAtBounds
                        ScrollBar.vertical: Gorgeto {}

                        delegate: Rectangle {
                            readonly property bool kivalasztva: config.currentLocation
                                && config.currentLocation.region === config.regionalZonesModel.region
                                && config.currentLocation.zone === model.key
                            width: varosok.width
                            height: 40
                            color: kivalasztva ? Stilus.zold : (koppintas.hovered ? Stilus.aktiv : "transparent")

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

                            Text {
                                anchors.left: parent.left
                                anchors.leftMargin: 14
                                anchors.right: parent.right
                                anchors.rightMargin: 24
                                anchors.verticalCenter: parent.verticalCenter
                                text: model.name
                                elide: Text.ElideRight
                                color: parent.kivalasztva ? Stilus.zoldonSzoveg : Stilus.szoveg
                                font.family: Stilus.font
                                font.pixelSize: 14
                                font.weight: parent.kivalasztva ? Font.DemiBold : Font.Normal
                            }

                            HoverHandler { id: koppintas }

                            TapHandler {
                                onTapped: config.setCurrentLocation(config.regionalZonesModel.region, model.key)
                            }
                        }
                    }
                }
            }

            ColumnLayout {
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignTop
                Layout.preferredWidth: 1
                spacing: 16

                SzakaszCim { text: qsTr("Language and formats") }

                ColumnLayout {
                    Layout.fillWidth: true
                    spacing: 6

                    Cimke { text: qsTr("System language") }

                    Valaszto {
                        Layout.fillWidth: true
                        model: config.supportedLocales.map(hely.nyelvNev)
                        currentIndex: hely.indexOf(config.supportedLocales, config.currentLanguageCode)
                        onActivated: config.currentLanguageCode = config.supportedLocales[index]
                    }
                }

                ColumnLayout {
                    Layout.fillWidth: true
                    spacing: 6

                    Cimke { text: qsTr("Number and date format") }

                    Valaszto {
                        Layout.fillWidth: true
                        model: config.supportedLocales.map(hely.nyelvNev)
                        currentIndex: hely.indexOf(config.supportedLocales, hely.lcSor)
                        onActivated: config.currentLCCode = config.supportedLocales[index]
                    }
                }

                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: elonezet.implicitHeight + 28
                    color: "#141516"
                    border.width: 1
                    border.color: Stilus.keret

                    ColumnLayout {
                        id: elonezet
                        anchors.fill: parent
                        anchors.margins: 14
                        spacing: 10

                        ElonezetSor {
                            nev: qsTr("Time zone")
                            ertek: config.currentLocation ? config.currentLocation.region + "/" + config.currentLocation.zone : ""
                        }

                        ElonezetSor {
                            nev: qsTr("Date")
                            ertek: new Date().toLocaleDateString(Qt.locale(hely.lcKod.split(".")[0]), Locale.ShortFormat)
                        }

                        ElonezetSor {
                            nev: qsTr("Number")
                            ertek: Number(1234567.89).toLocaleString(Qt.locale(hely.lcKod.split(".")[0]), "f", 2)
                        }

                        ElonezetSor {
                            nev: qsTr("Currency")
                            ertek: Number(1234).toLocaleCurrencyString(Qt.locale(hely.lcKod.split(".")[0]))
                        }
                    }
                }
            }
        }
    }
}