import io.calamares.core 1.0

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

Rectangle {
    id: bemutato
    color: Stilus.hatter

    property bool activatedInCalamares: false
    property int aktualis: 0
    property real haladas: 0
    property string uzenet: ""

    readonly property var kepek: [
        { forras: "images/01-updates.png", leiras: qsTr("Start using it, not configuring it. RaveOS only updates when you want it to.") },
        { forras: "images/02-privacy.png", leiras: qsTr("Private for you, secure for you. We do not collect data about you.") },
        { forras: "images/03-filesystem.png", leiras: qsTr("EXT4/BTRFS file system that never fragments.") },
        { forras: "images/04-gaming.png", leiras: qsTr("Optimized for gaming at the deepest levels.") },
        { forras: "images/05-bugreport.png", leiras: qsTr("If something goes wrong, open an issue at git.rp1.hu. Thank you!") },
        { forras: "images/06-team-credits.png", leiras: qsTr("RaveOS Team. Thanks to every beta tester!") }
    ]
    readonly property int csapatKep: kepek.length - 1
    readonly property bool vegeFele: haladas >= 0.9

    function frissit() {
        haladas = Number(Global.value("raveosHaladas")) || 0
        uzenet = Global.value("raveosUzenet") || ""
        if (vegeFele && aktualis !== csapatKep) {
            aktualis = csapatKep
        }
    }

    function lapoz(irany) {
        aktualis = (aktualis + irany + kepek.length) % kepek.length
        leptetes.restart()
    }

    function onActivate() {
        activatedInCalamares = true
        aktualis = 0
        frissit()
    }

    function onLeave() {
        activatedInCalamares = false
    }

    Connections {
        target: Global
        function onChanged() {
            Qt.callLater(bemutato.frissit)
        }
    }

    Timer {
        id: leptetes
        interval: 8000
        repeat: true
        running: bemutato.activatedInCalamares && !bemutato.vegeFele
        onTriggered: bemutato.aktualis = bemutato.aktualis + 1 >= bemutato.csapatKep ? 0 : bemutato.aktualis + 1
    }

    component NyilGomb: Button {
        id: gomb
        property string ut: ""
        Layout.preferredWidth: 40
        Layout.preferredHeight: 40
        padding: 0
        background: Rectangle {
            color: gomb.hovered ? Stilus.aktiv : "transparent"
            border.width: 1
            border.color: Stilus.keretErosebb
        }
        contentItem: Canvas {
            onPaint: {
                var c = getContext("2d")
                c.reset()
                c.strokeStyle = Stilus.szoveg
                c.lineWidth = 2
                c.beginPath()
                var x = gomb.ut === "bal" ? [23, 17] : [17, 23]
                c.moveTo(x[0], 14)
                c.lineTo(x[1], 20)
                c.lineTo(x[0], 26)
                c.stroke()
            }
        }
    }

    ColumnLayout {
        anchors.fill: parent
        anchors.topMargin: 16
        anchors.bottomMargin: 16
        anchors.leftMargin: 24
        anchors.rightMargin: 24
        spacing: 10

        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true

            Rectangle {
                id: keret
                anchors.horizontalCenter: parent.horizontalCenter
                width: Math.min(parent.width, parent.height * 16 / 9)
                height: width * 9 / 16
                color: "#141516"
                border.width: 1
                border.color: Stilus.keret
                clip: true

                Repeater {
                    model: bemutato.kepek

                    Image {
                        anchors.fill: parent
                        anchors.margins: 1
                        visible: index === bemutato.aktualis
                        source: modelData.forras
                        sourceSize.width: 1920
                        sourceSize.height: 1080
                        fillMode: Image.PreserveAspectFit
                        asynchronous: true
                        smooth: true
                        Accessible.role: Accessible.Graphic
                        Accessible.name: modelData.leiras
                    }
                }
            }
        }

        RowLayout {
            Layout.fillWidth: true
            spacing: 12

            Row {
                spacing: 6
                Repeater {
                    model: bemutato.kepek.length
                    Rectangle {
                        width: 24
                        height: 4
                        color: index === bemutato.aktualis ? Stilus.zold : Stilus.keretErosebb
                    }
                }
            }

            Text {
                text: (bemutato.aktualis + 1) + " / " + bemutato.kepek.length
                color: Stilus.szovegHalvany
                font.family: Stilus.mono
                font.pixelSize: 12
            }

            Item {
                Layout.fillWidth: true
            }

            NyilGomb {
                ut: "bal"
                Accessible.name: qsTr("Previous slide")
                onClicked: bemutato.lapoz(-1)
            }

            NyilGomb {
                ut: "jobb"
                Accessible.name: qsTr("Next slide")
                onClicked: bemutato.lapoz(1)
            }
        }

        ColumnLayout {
            Layout.fillWidth: true
            spacing: 8

            RowLayout {
                Layout.fillWidth: true
                spacing: 12

                Text {
                    Layout.fillWidth: true
                    text: bemutato.uzenet
                    elide: Text.ElideRight
                    color: Stilus.szoveg
                    font.family: Stilus.font
                    font.pixelSize: 14
                    font.weight: Font.DemiBold
                }

                Text {
                    text: Math.round(bemutato.haladas * 100) + "%"
                    color: Stilus.zold
                    font.family: Stilus.cim
                    font.weight: Font.Bold
                    font.pixelSize: 24
                }
            }

            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 8
                color: Stilus.keret
                Accessible.role: Accessible.ProgressBar
                Accessible.name: qsTr("Installation progress")

                Rectangle {
                    width: parent.width * Math.max(0, Math.min(1, bemutato.haladas))
                    height: parent.height
                    color: Stilus.zold
                }
            }
        }
    }
}