import QtQuick 2.12

import "qrc:/components"
import "qrc:/globals"

Item { id: _root
    property int interval       : 5000
    property bool isPlaying     : false // initial state

    height  : 35

    onIsPlayingChanged: if ( ! isPlaying ) { refresh() }

    signal triggered()

    function refresh() {
        _stepTimer.running = false
        _stepTimer.running = true // restart timer
        _progressAnim.restart()
    }

    Timer { id: _stepTimer
        interval    : _root.interval
        repeat      : true
        running     : _root.isPlaying && _root.visible

        onTriggered : {
            _progressAnim.restart()
            _root.triggered()
        }
    }

    IconButton { id  : _button
        anchors.verticalCenter  : _root.verticalCenter
        iconImageSource : _root.isPlaying ? "qrc:/images/iPause" : "qrc:/images/iPlay"
        isDefault       : true
        borderColor: Colors.transparent
        onClicked       : _root.isPlaying = ! _root.isPlaying

        ProgressCircle { id: _progress
            anchors.fill        : parent
            diameter            : _button.width
            minimum             : 0
            maximum             : 100
            thickness           : 4
            visible             : _root.isPlaying
            color               :  Colors.statusTextPaused
            circleShadowColor   : Colors.transparent

            // Smooth progress animation
            NumberAnimation on value { id: _progressAnim
                from    : 0
                to      : 100
                duration: _stepTimer.interval
                running : _stepTimer.running
                loops   : Animation.Infinite
            }
        }
    }

    Text { id: _helpText
        anchors {
            left            : _button.right
            leftMargin      : Variables.defaultMargin
            verticalCenter  : _root.verticalCenter
        }

        text            : qsTr("Tap step to view image, or press play to cycle.")
        color           : "#3682ED"
        font {
            pixelSize   : 30
            weight      : Font.Medium
        }

        wrapMode: Text.WordWrap
    }
}