import QtQuick

Rectangle {
    id: scoreBarRoot

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

    width: parent.width
    height: 60
    color: "lightgray"

    Row {
        id: scoreContainer

        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        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
        }
    }

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

        anchors.verticalCenter: parent.verticalCenter
        spacing: 4

        Text {
            text: parent.title
            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
            font.pixelSize: parent.fontPixelSize // 100% of the dynamic font size
            horizontalAlignment: Text.AlignHCenter
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}