import QtQuick 2.12

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

IconButton { id  : _root
    readonly property int intervalSec   : vTreatmentVitals.interval * 60
    property alias pulseAnimation       : _pulseAnimation

    iconSize        : Variables.headerIconDiameter
    iconImageSource : "qrc:/images/iVitals"

    Item { id: _fillHeart
        anchors {
            fill        : _root.icon
            topMargin   : _root.iconSize - (_root.iconSize / _root.intervalSec * vTreatmentVitals.totalCount)
            bottom      : _root.icon.bottom
            top         : _root.icon.top
        }

        clip: true
        Image { id: _fillHeartImage
            anchors.bottom  : parent.bottom
            height          : _root.iconSize
            width           : height
            source          : "qrc:/images/iVitalsRed"
            fillMode        : Image.PreserveAspectFit
        }
    }

    Text { id: _vitalCountdown
        objectName: "_vitalCountdown"

        color   : "gray"
        anchors {
            top             : _root.bottom
            topMargin       : -5
            horizontalCenter: _root.horizontalCenter
        }
        horizontalAlignment : Text.AlignHCenter
        verticalAlignment   : Text.AlignVCenter
        height              : 15
        width               : 50
        text                : vTreatmentVitals.interval ? vTreatmentVitals.countdown : ""
        font.pixelSize      : 16
    }

    SequentialAnimation { id: _pulseAnimation
        loops           : 2
        running         : false
        alwaysRunToEnd  : true
        onStarted       : _root.iconImageSource     = "qrc:/images/iVitalsRed"
        onStopped       : _root.iconImageSource     = "qrc:/images/iVitals"
        onFinished      : { _root.iconImageSource   = "qrc:/images/iVitals"; _root.opacity = 1; }
        ParallelAnimation { id: _pulseOut
            NumberAnimation { target: _root; property: "opacity";   from: 0.3;  to: 1;      duration: 350;                              } // pulse up
            NumberAnimation { target: _root; property: "scale";                 to: 1.14;   duration: 350; easing.type: Easing.OutCubic } // beat grow
        }

        ParallelAnimation { id: _pulseDown
            NumberAnimation { target: _root; property: "opacity";   from: 1;    to: 0.3;    duration: 350;                              } // pulse down
            NumberAnimation { target: _root; property: "scale";                 to: 1.0;    duration: 350; easing.type: Easing.InCubic  } // beat shrink
        }
    }
}