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

    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)

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

        clip: true

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

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

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

            function switch_KanaVoicing() {
                languageChooser.visible = false
                kanaVoicing.visible = true
            }

            function switchModeChooser() {
                languageChooser.visible = true
                kanaVoicing.visible = false
            }

            ModeChooser {
                id: languageChooser
            }

            KanaVoicing {
                id: kanaVoicing
            }

        }
    }
}