import QtQuick
import QtQuick.Controls
import "../../../colors"

Item { // Chooser
    id: languageChooser
    width: parent.width
    height: parent.height
    anchors.margins: 15
    visible: false

    Column {
        anchors.fill: parent
        spacing: 10

        Rectangle {
            id: modeChooserUpperText
            color: Colors.primaryContainer
            width: mainText.width + 20
            height: parent.height * 0.1
            anchors.horizontalCenter: parent.horizontalCenter
                    
            radius: 10
            border.width: 2
            border.color: Colors.primaryContainer_fg

            Text {
                id: mainText
                text: "Wähle ein Modus:"
                anchors.centerIn: parent
                font.pixelSize: parent.height * 0.6
                color: Colors.primary
            }
        }

        Row {
            width: parent.width
            height: parent.height - modeChooserUpperText.height - parent.spacing
            spacing: 10

            MouseArea {
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                width: (parent.width - parent.spacing) / 2
                height: parent.height

                onClicked: {
                    console.log("Choosing White Window")
                    languageChooser.parent.switch_KanaVoicing()
                }

                Rectangle {
                    anchors.fill: parent
                    color: parent.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer
                    
                    radius: 10
                    border.width: 2
                    border.color: parent.containsMouse ? Colors.secondaryContainer : Colors.secondaryContainer_fg

                    Text {
                        text: "Kana to Voicing"
                        anchors.centerIn: parent
                        font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
                        color: parent.parent.containsMouse ? Colors.secondary_fg : Colors.secondary
                    }
                }
            }

            MouseArea {
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                width: (parent.width - parent.spacing) / 2
                height: parent.height

                onClicked: {
                    console.log("Choosing Black Window")
                    languageChooser.parent.switch_VoicingKana()
                }

                Rectangle {
                    anchors.fill: parent
                    color: parent.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer
                    
                    radius: 10
                    border.width: 2
                    border.color: parent.containsMouse ? Colors.secondaryContainer : Colors.secondaryContainer_fg

                    Text {
                        text: "Voicing to Kana"
                        anchors.centerIn: parent
                        font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
                        color: parent.parent.containsMouse ? Colors.secondary_fg : Colors.secondary
                    }
                }
            }
        }
    }
}