import QtQuick
import "../services" as S

Item {
    id: root

    required property int percent
    required property color accentColor

    signal setPercent(real pct)

    implicitHeight: 36

    Text {
        id: _icon
        anchors.left: parent.left
        anchors.leftMargin: 12
        anchors.verticalCenter: parent.verticalCenter
        text: "\uF185"
        color: root.accentColor
        font.pixelSize: S.Theme.fontSize + 2
        font.family: S.Theme.iconFontFamily
    }

    Item {
        id: _slider
        anchors.left: _icon.right
        anchors.leftMargin: 8
        anchors.right: _label.left
        anchors.rightMargin: 8
        anchors.verticalCenter: parent.verticalCenter
        height: 6

        Rectangle {
            anchors.fill: parent
            color: S.Theme.base02
            radius: 3
        }

        Rectangle {
            width: parent.width * root.percent / 100
            height: parent.height
            color: root.accentColor
            radius: 3

            Behavior on width {
                NumberAnimation {
                    duration: 80
                }
            }
        }

        MouseArea {
            anchors.fill: parent
            anchors.margins: -6
            cursorShape: Qt.PointingHandCursor
            onPressed: mouse => _set(mouse)
            onPositionChanged: mouse => {
                if (pressed)
                    _set(mouse);
            }
            function _set(mouse) {
                root.setPercent(mouse.x / _slider.width * 100);
            }
        }
    }

    Text {
        id: _label
        anchors.right: parent.right
        anchors.rightMargin: 12
        anchors.verticalCenter: parent.verticalCenter
        text: root.percent + "%"
        color: S.Theme.base05
        font.pixelSize: S.Theme.fontSize
        font.family: S.Theme.fontFamily
        width: 30
    }
}