// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

// This file is part of the Qt Safe Renderer module

import QtQuick

import ClusterDemo

Item {
    id: playerView

    property real xCenter: remainingTimeImage.width / 2
    property real yCenter: remainingTimeImage.height / 2
    property var timeElapsed: ValueSource.musicElapsed

    Image {
        id: musicCover
        anchors.top: parent.top
        anchors.topMargin: (ValueSource.carId === 0) ? 160 : 70
        anchors.horizontalCenter: parent.horizontalCenter
        source: "image://etc/MusicPlayer_Cover.png"
        width: 136 * scaleFactor
        height: 136 * scaleFactor
    }

    Image {
        id: remainingTimeImage
        anchors.centerIn: musicCover
        source: "image://etc/MusicPlayer_CircleRemaining.png"
        width: 136 * scaleFactor
        height: 136 * scaleFactor
    }

    Text {
        id: song
        anchors.top: remainingTimeImage.bottom
        anchors.topMargin: 10
        anchors.horizontalCenter: remainingTimeImage.horizontalCenter
        text: "Tonight's the Night \n(Gonna Be Alright)"
        font.pointSize: 12
        color: "white"
    }
    Text {
        anchors.top: song.bottom
        anchors.horizontalCenter: song.horizontalCenter
        text: "ROD STEWART"
        font.pointSize: 10
        color: "white"
    }

    function paintBackground(ctx) {
        ctx.beginPath()
        ctx.lineWidth = 2
        ctx.strokeStyle = "white"
        ctx.arc(xCenter, yCenter, yCenter - ctx.lineWidth / 2, 1.5 * Math.PI,
                2 * Math.PI * timeElapsed / 100 + 1.5 * Math.PI)
        ctx.stroke()
    }

    Canvas {
        id: canvas
        width: remainingTimeImage.width
        height: width
        anchors.centerIn: musicCover
        onPaint: {
            var ctx = getContext("2d")
            ctx.reset()
            paintBackground(ctx)
        }
    }
    onTimeElapsedChanged: {
        canvas.requestPaint()
    }

    //Do not play music timer if view not visible
    Component.onCompleted: ValueSource.musicTimer.running = true
    onVisibleChanged: {
        if (!visible)
            ValueSource.musicTimer.running = false
        else
            ValueSource.musicTimer.running = true
    }
}