import QtQuick

import QtQuick.Controls.Basic

ApplicationWindow {
    id: root
    title: "Translation Statistics"
    width: 400
    height: 400
    minimumWidth: 360
    minimumHeight: 400
    visible: true

    palette {
        window: "#e0dfde";
        base: "#e8e7e6";
        alternateBase: "#e2e1e0";
        light: "#dddcdb";
        dark: "#353637";
        mid: "#bdbdbd";
        windowText: "#26282a";
        text: "#26282a";
        brightText: "#555658";
        button: "#bfbebd";
        buttonText: "#26282a";
        highlight: "#0066ff";
        highlightedText: "#f9f9f9";
        toolTipBase: "#ffffff";
        toolTipText: "#000000";
        shadow: "#7abd84";
        midlight: "#5c9e67"

        link: "#45a7d7";
        linkVisited: "#7f8c8d";
    }

    Item {
        anchors.fill: parent

        Text {
            y: 10
            x: 90
            font.pixelSize: 18
            color: "black"
            text: {
                var rc = "Mobile";
                var rows = Stats.rows;
                for (let i = 0; i < rows.length; i = i + 1) {
                    var r = rows[i];
                    if (r.language === "en")
                        rc += " (" + rows[i].mobileStringCount + ")";
                }
                return rc;
            }
        }
        Text {
            y: 10
            x: 230
            font.pixelSize: 18
            color: "black"
            text: {
                var rc = "Desktop";
                var rows = Stats.rows;
                for (let i = 0; i < rows.length; i = i + 1) {
                    var r = rows[i];
                    if (r.language === "en")
                        rc += " (" + rows[i].desktopStringCount + ")";
                }
                return rc;
            }
        }

        Column {
            width: parent.width
            y: 40
            Repeater {
                model: Stats.rows
                delegate: Item {
                    visible: modelData.language !== "en"
                    height: visible ? 40 : 0
                    width: 300
                    Text {
                        font.pixelSize: 16
                        color: "black"
                        text: modelData.language
                        x: 74 - width
                        y: 5 + 25 / 2 - height / 2
                    }

                    Rectangle {
                        x: 80
                        y: 5
                        height: 25
                        radius: 6
                        color: "#90e4b5"
                        width:  modelData.doneMobile /modelData.mobileStringCount * 140
                        Text {
                            color: "#333333"
                            text:  (modelData.doneMobile / modelData.mobileStringCount * 100).toFixed(0) + "%";
                            x: 10
                            anchors.verticalCenter: parent.verticalCenter
                            font.pixelSize: 16
                        }
                    }

                    Rectangle {
                        x: 230
                        y: 5
                        height: 25
                        radius: 6
                        color: "#90e4b5"
                        width: modelData.doneDesktop / modelData.desktopStringCount * 140
                        Text {
                            color: "#333333"
                            text:  (modelData.doneDesktop / modelData.desktopStringCount * 100).toFixed(0) + "%";
                            x: 10
                            anchors.verticalCenter: parent.verticalCenter
                            font.pixelSize: 16
                        }
                    }
                }
            }
        }

        Text {
            text: "Translation status of Flowee Pay. (2025.00.0)"
            font.pixelSize: 16
            color: "black"
            x: 10
            y: root.height - height - 10
            width: root.width - 20
            wrapMode: Text.WordWrap
        }
    }
}