// Qt
import QtQuick 2.12

//  Qml imports
import "qrc:/globals"
import "qrc:/compounds"
import "qrc:/components"
import "qrc:/pages/settings"


SettingsBase    { id: _root
    itemIndex                               : ServiceModeMainMenu.CalibrateHydraulics
    confirmVisible                          : false
    property int currentIndex               : ServiceModeHydraulics.DeaerationPressure
    property string instructionTitle        : ""
    property var    instructionStepNames    : []
    property var    instructionStepImages   : []

    property var options      : [
        qsTr("Deaeration Pressure"  ),
        qsTr("Flow Pressure"        ),
        qsTr("Balance Chamber"      ),
        qsTr("Acid Pump Volume"     ),
        qsTr("Bic Pump Volume"      ),
        qsTr("UF Pump Volume"       ),
    ]

    enum OptionsIndex {
        DeaerationPressure  ,
        FlowPressure        ,
        BalanceChamber      ,
        AcidPumpVolume      ,
        BicPumpVolume       ,
        UFPumpVolume
    }

    onCurrentIndexChanged: updateModel ()
//    onCurrentIndexChanged: {
//        switch (currentIndex) {
//        case ServiceModeHydraulics.DeaerationPressure   :
//            print("Deaeration Pressure")
//            break

//        case ServiceModeHydraulics.FlowPressure         :
//            print("Flow Pressure")
//            break

//        case ServiceModeHydraulics.BalanceChamber       :
//            print("Balance Chamber")
//            break

//        case ServiceModeHydraulics.AcidPumpVolume       :
//            print("Acid Pump Volume")
//            break

//        case ServiceModeHydraulics.BicPumpVolume        :
//            print("Bic Pump Volume")
//            break

//        case ServiceModeHydraulics.UFPumpVolume         :
//            print("UF Pump Volume")
//            break
//        }
//    }

    function updateModel () {
        let  stepName           = _root.options[_root.currentIndex] ?? ""
        let group               = vSettings.groupFormat(stepName)
        let instructionsGroup   = vSettings.instructions[group]

        if ( ! instructionsGroup ) { return }

        instructionTitle      = instructionsGroup.title
        instructionStepNames  = instructionsGroup.keys
        instructionStepImages = instructionsGroup.values
    }

    contentItem:  Row { id: _row
        anchors.fill        : parent
        anchors.topMargin   : Variables.defaultMargin
        spacing             : Variables.defaultMargin * 2

        Column { id: _optionsColumn
            width   : _row.width * 0.2
            height  : _row.height
            spacing : Variables.defaultMargin

            Repeater { id: _repeater

                model   : _root.options

                delegate : Rectangle { id: _delegate
                    color   : Colors.panelBackgroundColor
                    width   : _optionsColumn.width
                    height  : Variables.adjustmentLabelUnitContainerHeight
                    radius  : Variables.touchRectRadius

                    border {
                        width    : 2
                        color    : _root.currentIndex === index ?   Colors.backgroundButtonSelect :
                                                                    Colors.panelBorderColor
                    }

                    Text {
                        text            : modelData
                        anchors.centerIn: parent
                        color           : Colors.offWhite
                        font.pixelSize  : Fonts.fontPixelDefaultButton
                        font.weight     : Font.Medium
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked   :  _root.currentIndex = index
                    }
                }
            }
        }

        InstructionView { id: _instructionView
            title           : "test" //_root.instructionTitle
            stepNames       : _root.options//_root.instructionStepNames
//            stepImages      : _root.instructionStepImages
            width           : _row.width * 0.8 - _row.spacing
            height          : _row.height
            showAutoStep    : false
            darkModeOnly    : true
        }
    }
}