//  Qml imports
import "qrc:/globals"
import "qrc:/components"

// Qt
import QtQuick 2.12
import QtQuick.Controls 2.15

Item { id: _root
    height      : Variables.contentHeight

    property alias value        : _slider.value
    property alias iconImage    : _image.source
    property alias slider       : _slider

    readonly property color sliderBkgndColor: Colors.dialogShadowColor
    readonly property color sliderColor     : Colors.highlightProgressBar
    readonly property color valueColor      : Colors.dialogValueColor

    readonly property int sliderMargins     : Variables.defaultMargin * 3.5 // margins added to visible background to make a larger hitbox
    readonly property int hitboxMargins     : Variables.defaultMargin * -2  // negative margins added to create larger hitbox for touch
    readonly property int knobDiameter      : 20
    readonly property int hitboxHeight      : 70

    Image { id  : _image
        anchors {
            left           : parent.left
            verticalCenter  : parent.verticalCenter
        }
    }

    Slider { id: _slider
        anchors {
            left            : _image.right
            leftMargin      : _root.hitboxMargins
            right           : parent.right
            rightMargin     : _root.hitboxMargins
            verticalCenter  : parent.verticalCenter
        }

        height              : _root.hitboxHeight
        stepSize            : 1
        from                : 1
        to                  : 5
        snapMode            : Slider.SnapAlways

        background: Rectangle { id: _backgroundContainer
            color   : Colors.transparent
            height  : parent.height // hitbox height
            radius  : height

            Rectangle { id: _background
                anchors {
                    verticalCenter  : parent.verticalCenter
                    left            : parent.left
                    leftMargin      : _root.sliderMargins
                    right           : parent.right
                    rightMargin     : _root.sliderMargins
                }
                height  : 5         // visible height
                radius  : height
                color   : _root.sliderBkgndColor

                Rectangle { id: _progressBackground
                    anchors.verticalCenter: parent.verticalCenter

                    width   : slider.visualPosition * parent.width
                    height  : _background.height
                    radius  : height
                    color   : _root.sliderColor
                }
            }
        }

        handle: Rectangle { id: _knob
            anchors.verticalCenter  : parent.verticalCenter
            // move knox with end of progress.
            // visual position - visible slider <slider width - left/right margins> + shift knob by left margin plus half the diameter
            x                       : (slider.visualPosition * (parent.width - _root.sliderMargins * 2 )) + _root.sliderMargins - (_root.knobDiameter / 2)
            width                   : _root.knobDiameter
            height                  : width
            radius                  : width
            color                   : slider.pressed ? _root.valueColor : _root.sliderColor
        }
    }

    // --- Tick marks above slider ---
    Row { id: _ticks
        anchors {
            left        : _slider.left
            leftMargin  : _root.sliderMargins
            right       : _slider.right
            rightMargin : _root.sliderMargins
            bottom      : _slider.top
            bottomMargin: -10
        }
        // space evenly and account for background hitbox margins
        spacing         : (_slider.width - ( _root.sliderMargins * 2 + 6 )  ) / (_slider.to - _slider.from)

        Repeater {
            model: 5

            Rectangle {
                width   : 1
                height  : 4
                color   : _root.sliderColor
            }
        }
    }
}