pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Templates as QQCT
import Weave.Controls
import Weave.Templates as T

T.RangeSlider {
    id: root

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding,
                            first.implicitHandleWidth + leftPadding + rightPadding,
                            second.implicitHandleWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding,
                             first.implicitHandleHeight + topPadding + bottomPadding,
                             second.implicitHandleHeight + topPadding + bottomPadding)

    opacity: enabled ? 1.0 : Theme.component.slider.opacity.disabled
    layer.enabled: !root.enabled

    hoverEnabled: root.enabled

    snapMode: stepSize > 0 ? QQCT.RangeSlider.SnapAlways : QQCT.RangeSlider.NoSnap

    ticksVisible: stepSize > 0

    firstToolTipText: root.first.value.toFixed(2)
    secondToolTipText: root.second.value.toFixed(2)

    background: Item {
        implicitWidth: root.orientation === Qt.Horizontal ? Theme.component.slider.range.minWidth : Theme.component.slider.thumbContainer.height
        implicitHeight: root.orientation === Qt.Horizontal ? Theme.component.slider.thumbContainer.height : Theme.component.slider.range.minWidth

        Rectangle {
            id: track
            anchors.centerIn: parent
            width: root.orientation === Qt.Horizontal ? parent.width : Theme.component.slider.rail.height
            height: root.orientation === Qt.Horizontal ? Theme.component.slider.rail.height : parent.height
            color: Theme.component.slider.rail.backgroundColor

            Rectangle {
                x: root.orientation === Qt.Horizontal ? root.first.visualPosition * parent.width : 0.0
                y: root.orientation === Qt.Horizontal ? 0.0 : root.second.visualPosition * parent.height
                width: root.orientation === Qt.Horizontal ? root.second.visualPosition * parent.width - x : parent.width
                height: root.orientation === Qt.Horizontal ? parent.height : (root.first.visualPosition * parent.height - y)
                color: Theme.component.slider.track.backgroundColor
            }
        }

        Row {
            id: tickMarkRow
            visible: root.ticksVisible && root.orientation === Qt.Horizontal
            anchors {
                left: parent.left
                right: parent.right
                top: track.bottom
            }

            height: Theme.component.slider.mark.height
            spacing: (root.stepSize/rangeMagnitude) * (width - (tickCount*tickWidth))
            property real rangeMagnitude: Math.abs(root.to - root.from)
            property int tickCount: (root.ticksVisible && root.stepSize > 0) ? (rangeMagnitude / root.stepSize) + 1 : 0
            property int tickWidth: Theme.component.slider.mark.width

            Repeater {
                model: tickMarkRow.visible ? tickMarkRow.tickCount : 0
                delegate: Rectangle {
                    height: tickMarkRow.height
                    width: tickMarkRow.tickWidth
                    color: Theme.component.slider.mark.backgroundColor
                }
            }
        }

        Column {
            id: tickMarkColumn
            visible: root.ticksVisible && root.orientation !== Qt.Horizontal
            anchors {
                top: parent.top
                bottom: parent.bottom
                right: track.left
            }
            width: Theme.component.slider.mark.height
            spacing: (root.stepSize/tickMarkRow.rangeMagnitude) * (height - (tickMarkRow.tickCount * tickHeight))
            property int tickHeight: Theme.component.slider.mark.width

            Repeater {
                model: tickMarkColumn.visible ? tickMarkRow.tickCount : 0
                delegate: Rectangle {
                    height: tickMarkColumn.tickHeight
                    width: tickMarkColumn.width
                    color: Theme.component.slider.mark.backgroundColor
                }
            }
        }
    }

    first.handle: Item {
        property real mappedSpan: root.orientation === Qt.Horizontal ? (root.availableWidth - width) : (root.availableHeight - height)
        property real mappedPosition: root.first.visualPosition * mappedSpan

        x: root.orientation === Qt.Horizontal
                ? root.leftPadding + mappedPosition
                : root.leftPadding + (root.availableWidth-width)/2
        y: root.orientation === Qt.Horizontal
                ? root.topPadding + (root.availableHeight-height)/2
                : root.topPadding + mappedPosition

        implicitWidth: root.orientation === Qt.Horizontal ? Theme.component.slider.thumbContainer.width : Theme.component.slider.thumbContainer.height
        implicitHeight: root.orientation === Qt.Horizontal ? Theme.component.slider.thumbContainer.height : Theme.component.slider.thumbContainer.width

        Rectangle {
            id: firstHandle

            x: root.orientation === Qt.Horizontal ? ((parent.width - width) * root.first.visualPosition) : ((parent.width - width)/2)
            y: root.orientation === Qt.Horizontal ? ((parent.height - height)/2) : ((parent.height - height) * root.first.visualPosition)
            implicitWidth: root.orientation === Qt.Horizontal ? Theme.component.slider.thumb.width : Theme.component.slider.thumb.height
            implicitHeight: root.orientation === Qt.Horizontal ? Theme.component.slider.thumb.height : Theme.component.slider.thumb.width
            color: Theme.component.slider.thumb.backgroundColor
            radius: Theme.component.slider.thumb.borderRadius

            BoxShadow {
                anchors.fill: firstHandle
                radius: firstHandle.radius

                readonly property string shadowState: root.first.pressed ? "pressed"
                        : (root.enabled && root.first.hovered) ? "hover"
                        : root.first.handle.activeFocus ? "focus"
                        : "hover"
                offsetX: Theme.component.slider.thumb.boxShadowX[shadowState]
                offsetY: Theme.component.slider.thumb.boxShadowY[shadowState]
                blurRadius: Theme.component.slider.thumb.boxShadowBlur[shadowState]
                spreadRadius: Theme.component.slider.thumb.boxShadowSpread[shadowState]
                color: shadowState === "hover" && (!root.enabled || !root.first.hovered) ? "transparent"
                     : Theme.component.slider.thumb.boxShadowColor[shadowState]
            }

            ToolTip.visible: root.toolTipEnabled && (root.first.pressed || root.first.hovered)
            ToolTip.preferredAlignment: root.orientation === Qt.Horizontal ? T.Flyout.PreferVertical : T.Flyout.PreferHorizontal
            ToolTip.text: root.firstToolTipText
            ToolTip.content: ToolTipContent {}
        }
    }

    second.handle: Item {
        property real mappedSpan: root.orientation === Qt.Horizontal ? (root.availableWidth - width) : (root.availableHeight - height)
        property real mappedPosition: root.second.visualPosition * mappedSpan

        x: root.orientation === Qt.Horizontal
                ? root.leftPadding + mappedPosition
                : root.leftPadding + (root.availableWidth-width)/2
        y: root.orientation === Qt.Horizontal
                ? root.topPadding + (root.availableHeight-height)/2
                : root.topPadding + mappedPosition

        implicitWidth: root.orientation === Qt.Horizontal ? Theme.component.slider.thumbContainer.width : Theme.component.slider.thumbContainer.height
        implicitHeight: root.orientation === Qt.Horizontal ? Theme.component.slider.thumbContainer.height : Theme.component.slider.thumbContainer.width

        Rectangle {
            id: secondHandle

            x: root.orientation === Qt.Horizontal ? ((parent.width - width) * root.second.visualPosition) : ((parent.width - width)/2)
            y: root.orientation === Qt.Horizontal ? ((parent.height - height)/2) : ((parent.height - height) * root.second.visualPosition)
            implicitWidth: root.orientation === Qt.Horizontal ? Theme.component.slider.thumb.width : Theme.component.slider.thumb.height
            implicitHeight: root.orientation === Qt.Horizontal ? Theme.component.slider.thumb.height : Theme.component.slider.thumb.width
            color: Theme.component.slider.thumb.backgroundColor
            radius: Theme.component.slider.thumb.borderRadius

            BoxShadow {
                anchors.fill: parent
                radius: secondHandle.radius

                readonly property string shadowState: root.second.pressed ? "pressed"
                        : (root.enabled && root.second.hovered) ? "hover"
                        : root.second.handle.activeFocus ? "focus"
                        : "hover"
                offsetX: Theme.component.slider.thumb.boxShadowX[shadowState]
                offsetY:Theme.component.slider.thumb.boxShadowY[shadowState]
                blurRadius: Theme.component.slider.thumb.boxShadowBlur[shadowState]
                spreadRadius: Theme.component.slider.thumb.boxShadowSpread[shadowState]
                color: shadowState === "hover" && (!root.enabled || !root.second.hovered) ? "transparent"
                     : Theme.component.slider.thumb.boxShadowColor[shadowState]
            }

            ToolTip.visible: root.toolTipEnabled && (root.second.pressed || root.second.hovered)
            ToolTip.preferredAlignment: root.orientation === Qt.Horizontal ? T.Flyout.PreferVertical : T.Flyout.PreferHorizontal
            ToolTip.text: root.secondToolTipText
            ToolTip.content: ToolTipContent {}
        }
    }
}