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

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

    function switch_KanaVoicing() {
        parent.switch_KanaVoicing()
    }

    function start() {
    }

    property real result: 0
    property string mode: ""
    property var results: createResults(10)

    function createResults(n) {
        var arr = []
        for (var i = 0; i < n; i++) {
            arr.push({
                kana: "あ",
                correctness: false,
                answer: "a",
                correct: "a"
            })
        }
        return arr
    }

    Column {
        anchors.fill: parent
        spacing: 10

        Rectangle {
            id: learnerResultUpperText
            color: Colors.primaryContainer
            width: parent.width
            height: parent.height * 0.1
                    
            radius: 10
            border.width: 2
            border.color: Colors.primaryContainer_fg

            Text {
                id: mainText
                text: "Ergebnisse:"
                anchors.centerIn: parent
                font.pixelSize: parent.height * 0.6
                color: Colors.primary
            }
        }

        Row {
            width: parent.width
            height: parent.height - learnerResultUpperText.height - parent.spacing
            spacing: 10
            Rectangle {
                width: parent.width * 0.25
                height: parent.height
                color: "transparent"
                Column{
                    width: parent.width
                    height: parent.height
                    spacing: 10

                    Repeater{
                        model: results

                        Row{
                            width: parent.width
                            height: parent.height/10 - parent.spacing * 0.9
                            spacing: 10

                            Rectangle{
                                width: parent.height
                                height: parent.height
                                color: Colors.primaryContainer
                    
                                radius: 10
                                border.width: 2
                                border.color: Colors.primaryContainer_fg

                                Text{
                                    text: modelData.kana
                                    width: parent.width
                                    height: parent.height
                                    anchors.centerIn: parent
                                    anchors.verticalCenterOffset: -parent.height * 0.125
                                    anchors.horizontalCenterOffset: parent.width * 0.1
                                    font.pixelSize: parent.height * 0.8
                                    color: modelData.correctness ? "green" : "red"
                                }
                            }

                            Rectangle{
                                width: parent.height
                                height: parent.height
                                color: Colors.primaryContainer
                    
                                radius: 10
                                border.width: 2
                                border.color: Colors.primaryContainer_fg

                                Image {
                                    source: modelData.correctness ? "../../../colors/icons/correct.svg" : "../../../colors/icons/wrong.svg"
                                    anchors.centerIn: parent
                                    width: parent.height*0.8
                                    height: parent.height*0.8

                                    smooth: true
                                    sourceSize.width: width
                                    sourceSize.height: height
                                }
                            }

                            Rectangle{
                                width: parent.width - parent.height *2 - parent.spacing*2
                                height: parent.height
                                color: Colors.primaryContainer

                                radius: 10
                                border.width: 2
                                border.color: Colors.primaryContainer_fg

                                Text{
                                    text: "[" + modelData.correct + "]"
                                    width: parent.width
                                    height: parent.height
                                    anchors.centerIn: parent
                                    anchors.horizontalCenterOffset: 10
                                    font.pixelSize: parent.height * 0.8
                                    color: modelData.correctness ? "green" : "red"
                                }
                            }
                        }
                    }
                }
            }
            
            Rectangle{
                width: parent.width * 0.75
                height: parent.height
                color: "transparent"
                Column{
                    width: parent.width
                    height: parent.height
                    spacing: 10
                    Row {
                        spacing: 10
                        width: parent.width
                        height: parent.height * 4 / 10 - parent.spacing * 2 / 3

                        Rectangle {
                            color: "transparent"
                            width: (parent.width - (learnerLastResultKanaBG.width + learnerLastResultTextBG.width))/2
                            height: parent.height
                        }

                        Rectangle {
                            id: learnerLastResultKanaBG
                            color: results[results.length-1].correctness ? "green" : "red"
                            width: parent.height - parent.spacing
                            height: parent.height
                    
                            radius: 10
                            border.width: 2
                            border.color: Colors.primaryContainer_fg

                            Text {
                                id: learnerLastResultKana
                                text: results[results.length-1].kana
                                width: parent.width
                                height: parent.height
                                anchors.centerIn: parent
                                anchors.verticalCenterOffset: -parent.height * 0.1
                                font.pixelSize: parent.height * 0.8
                                color: Colors.primary
                            }
                        }

                        Rectangle {
                            id: learnerLastResultTextBG
                            color: results[results.length-1].correctness ? "green" : "red"
                            width: learnerLastResultText.width + 2 * parent.spacing
                            height: parent.height
                    
                            radius: 10
                            border.width: 2
                            border.color: Colors.primaryContainer_fg

                            Text {
                                id: learnerLastResultText
                                text: "[" + results[results.length-1].correct + "]"
                                anchors.centerIn: parent
                                font.pixelSize: learnerLastResultKana.font.pixelSize/2
                                color: Colors.primary
                            }
                        }
                    }

                    Rectangle {
                        id: learnerResultTextBG
                        color: Colors.primaryContainer
                        anchors.horizontalCenter: parent.horizontalCenter
                        width: parent.width
                        height: parent.height * 3 / 10 - parent.spacing * 2 / 3
                    
                        radius: 10
                        border.width: 2
                        border.color: Colors.primaryContainer_fg

                        Text {
                            id: learnerResultText
                            text: result*100 + "% Richtig"
                            width: parent.width
                            horizontalAlignment: Text.AlignHCenter
                            font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
                            color: Colors.primary
                        }
                    }

                    Row {
                        width: parent.width
                        height: parent.height * 3 / 10 - parent.spacing * 2 / 3
                        spacing: 10

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

                            onClicked: {
                                console.log("Choosing White Window")
                                mode === "KanaVoicing" ? learnerResult.parent.switch_KanaVoicing() : learnerResult.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: "Again"
                                    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 / 2 - parent.spacing
                            height: parent.height

                            onClicked: {
                                console.log("Choosing Black Window")
                                learnerResult.parent.switchModeChooser()
                            }

                            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: "Menu"
                                    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
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}