import QtQuick 
import Quickshell
import QtQuick.Controls
import Quickshell.Wayland
import Quickshell.Hyprland
import Quickshell.Io
import "../../colors"
import "./modules"

PanelWindow {
    id: learner
    implicitWidth: screen.width * 0.75
    implicitHeight: screen.height * 0.5
    color: "transparent"
    visible: true
    focusable: true

    Component.onCompleted: {
        semiJLoader.all_invisible()
        languageChooser.visible = true
    }

    FocusScope {
        id: jLearnerScope
        focus: true

        Keys.onReleased: function(event) {
            if (event.key === Qt.Key_Escape) {
                console.log("Pressed Escape, closing JLearner")
                jLearnerLoader.active = false
            }
        }

        Rectangle {
            anchors.fill: parent
            color: "lightblue"
        }
    }

    Rectangle {
        anchors.fill: parent
        radius: 10
        // color: Qt.alpha(Colors.surfaceContainerLowest, 0.5)

        color: "blue"

        border.width: 2
        border.color: Colors.outlineVariant

        clip: true

        Rectangle{
            width: parent.width - 20
            height: parent.height - 20
            anchors.centerIn: parent
            color: "pink"

            Column {
                id: learnerWindow
                anchors.fill: parent
                spacing: 10

                Rectangle {
                    id: head
                    width: parent.width
                    height: parent.height * 0.1
                    color: "#FFFFFF"

                    Text {
                        text: "Language Learner"
                        anchors.centerIn: parent
                        font.pixelSize: parent.height * 0.8
                        color: "black"
                    }
                }

                Rectangle{
                    id: semiJLoader
                    width: parent.width
                    height: parent.height * 0.9 - parent.spacing

                    color: "orange"

                    function all_invisible() {
                        languageChooser.visible = false
                        kanaVoicing.visible = false
                        voicingKana.visible = false
                        learnerResult.visible = false
                    }

                    function switchModeChooser() {
                        all_invisible()
                        languageChooser.visible = true
                        languageChooser.start()
                    }

                    function switch_KanaVoicing() {
                        all_invisible()
                        kanaVoicing.visible = true
                        kanaVoicing.start()
                    }

                    function switch_VoicingKana() {
                        all_invisible()
                        voicingKana.visible = true
                        voicingKana.start()
                    }

                    function switchResult(result, mode, results) {
                        all_invisible()
                        console.log("Result: " + result)
                        console.log("Mode: " + mode)
                        learnerResult.visible = true
                        learnerResult.result = result
                        learnerResult.mode = mode
                        learnerResult.results = results
                        learnerResult.start()
                    }

                    ModeChooser {
                        id: languageChooser
                    }

                    KanaVoicing {
                        id: kanaVoicing
                    }

                    VoicingKana {
                        id: voicingKana
                    }

                    JLearnerResult {
                        id: learnerResult
                    }
                }
            }
        }
    }
}