// Qt
import QtQuick 2.12
import QtGraphicalEffects 1.12

// Project

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

Rectangle { id: _root
    objectName: "_TreatmentFlowsComponent"

    property string title               : ""
    property string unitText            : ""
    property string extraText           : ""
    property alias  value               : _rangedValue.rawValue
    property alias  minimum             : _rangedValue.rawMin
    property alias  maximum             : _rangedValue.rawMax
    property alias  step                : _rangedValue.rawStep
    property alias  precision           : _rangedValue.precision
    property bool   showButtons         : true
    property bool   buttonsEnabled      : true
    property bool   dropShadowEnabled   : true

    color   : Colors.mainTreatmentLighterBlue
    radius  : 5

    signal increment(real newValue)
    signal decrement(real newValue)

    RangedValue { id: _rangedValue
        objectName: "_rangedValue"
    }

    Text { id: _title
        objectName: "title"

        anchors {
            horizontalCenter        : _root.horizontalCenter
            top                     : parent.top
            topMargin               :  Variables.defaultMargin
        }

        font {
            pixelSize   : Fonts.fontPixelContainerTitle
            weight      : Font.Medium
        }

        width           : _root.width
        height          : Variables.contentHeight
        text            : _root.title
        color           : Colors.pressuresText
        horizontalAlignment : Text.AlignHCenter
    }

    Row { id: _row
        objectName: "row"

        anchors {
            top                 : _title.bottom
            bottom              : _root.bottom
            horizontalCenter    : _root.horizontalCenter
        }

        LabelValue { id: _value
            objectName: "value"
            anchors {
                top         : parent.top
                topMargin   : Variables.defaultMargin
            }
            height                  : Variables.contentHeight
            width                   : Variables.treatmentFlowsComponentWidth
            topText                 : value !== undefined ? _root.value.toFixed(_root.precision) : Variables.emptyEntry
            topTextFont.pixelSize   : 60
            topTextFont.weight      : Font.Light
            bottomText              : _root.unitText
            bottomTextFont.pixelSize: 22
            bottomTextTopMargin     : Variables.defaultMargin

            Text { id: _extraText
                objectName: "extraText"

                anchors {
                    horizontalCenter: _value.horizontalCenter
                    top          : parent.bottom
                    topMargin    : Variables.defaultMargin * 4.5
                }

                font {
                    pixelSize   : 28
                    weight      : Font.Bold
                }

                text            : _root.extraText
                width           : 40
                height          : Variables.contentHeight
                color           : Colors.mainTreatmentOrange
                horizontalAlignment : Text.AlignHCenter
            }
        }

        Column { id: _column
            objectName: "column"

            visible: showButtons
            spacing: Variables.defaultMargin * 2.5

            ArrowButton {id : _upArrowIcon
                objectName  : "upArrowIcon"
                upArrow     : true
                enabled     : buttonsEnabled && _rangedValue.canIncrement

                onClicked   : { _root.increment(_rangedValue.incrementedValue()) }
            }

            ArrowButton {id : _downArrowIcon
                objectName  : "downArrowIcon"
                downArrow   : true
                enabled     : buttonsEnabled && _rangedValue.canDecrement

                onClicked   : { _root.decrement(_rangedValue.decrementedValue()) }
            }
        }
    }

    layer.enabled   : _root.dropShadowEnabled && _root.showButtons
    layer.effect    : DropShadow { id: _dropShadow
        horizontalOffset: 3
        verticalOffset  : 3
        radius          : 3.0
        samples         : 7
        color           : "#50000000"
        source          : _root
        anchors.fill    : _root
    }
}