// 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
    property bool   canOff              : false
    property bool   runAnimation        : false
    property real   pulseAlpha          : 1

    color   : Colors.mainTreatmentLighterBlue
    radius  : 5

    border {
        width: 4
        color: _root.runAnimation ? Qt.rgba(255/255, 184/255, 54/255, pulseAlpha) : Colors.mainTreatmentLighterBlue
    }

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

    NumberAnimation on pulseAlpha {
        from        : 0.2
        to          : 1
        duration    : 1000
        loops       : Animation.Infinite
        easing.type : Easing.InOutQuad
        running     : _root.runAnimation
    }

    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.canOff && value < minimum ? qsTr("OFF") :
                                                                                              _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 && ( _root.canOff ? value >= minimum : _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
    }
}