import QtQuick
import Solitare

Rectangle {
    id: scoreBarRoot

    property int score: 0
    property int time: 0
    property int moves: 0
    property int dynamicFontSize: Math.round(height * 0.35)

    color: "lightgray"

    Column {
        anchors.left: parent.left
        anchors.right: parent.right

        Row {
            id: scoreContainer

            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 40

            ScoreItem {
                title: "SCORE"
                value: scoreBarRoot.score
                fontPixelSize: scoreBarRoot.dynamicFontSize
            }

            ScoreItem {
                /**
                * Formats a given time in seconds as a string in the format HH:MM:SS.
                * If hours is 0, it will instead format as HH:SS.
                *
                * @param {number} seconds - The time in seconds to be formatted.
                * @returns {string} The formatted time string.
                */
                function formatTime(seconds) {
                    var hours = Math.floor(seconds / 3600);
                    var minutes = Math.floor((seconds % 3600) / 60);
                    var remainingSeconds = seconds % 60;
                    // Format with leading zeros
                    var formattedTime = "";
                    if (hours > 0)
                        formattedTime = (hours < 10 ? "0" : "") + hours + ":";

                    formattedTime += (minutes < 10 ? "0" : "") + minutes + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds;
                    return formattedTime;
                }

                title: "TIME"
                value: formatTime(scoreBarRoot.time)
                fontPixelSize: scoreBarRoot.dynamicFontSize
            }

            ScoreItem {
                title: "MOVES"
                value: scoreBarRoot.moves
                fontPixelSize: scoreBarRoot.dynamicFontSize
            }
        }

        Row {
            id: statusContainer

            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 40

            ScoreItem {
                visible: GameState.isWinnable.winnable === false
                title: "GAME LOST"
                titleColor: "red"
                fontPixelSize: scoreBarRoot.dynamicFontSize * 1.5
            }

            ScoreItem {
                visible: GameState.preliminaryWin === true && GameState.gameWon === false
                title: "PRE-WON"
                titleColor: "green"
                fontPixelSize: scoreBarRoot.dynamicFontSize * 1.5
            }

            ScoreItem {
                visible: GameState.gameWon === true
                title: "GAME WON"
                titleColor: "green"
                fontPixelSize: scoreBarRoot.dynamicFontSize * 1.5
            }

            ScoreItem {
                visible: GameState.gameWon === false && GameState.preliminaryWin === false && GameState.isWinnable.winnable !== false
                title: "PLAYING"
                fontPixelSize: scoreBarRoot.dynamicFontSize * 1.5
            }
        }
    }

    component ScoreItem: Column {
        required property string title
        property string value
        required property int fontPixelSize
        property color titleColor
        property color valueColor

        anchors.verticalCenter: parent.verticalCenter
        spacing: 4

        Text {
            text: parent.title
            color: parent.titleColor
            font.pixelSize: Math.round(parent.fontPixelSize * 0.4) // 40% of the dynamic font size
            font.bold: true
            horizontalAlignment: Text.AlignHCenter
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Text {
            text: parent.value
            color: parent.valueColor
            font.pixelSize: parent.fontPixelSize // 100% of the dynamic font size
            horizontalAlignment: Text.AlignHCenter
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}