/*!
 *
 * Copyright (c) 2021-2024 Diality Inc. - All Rights Reserved.
 * \copyright
 * THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM, IN PART OR IN
 * WHOLE, WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER.
 *
 * \file    StepIndicator.qml
 * \author  (last)      Behrouz NematiPour
 * \date    (last)      06-Jul-2021
 * \author  (original)  Behrouz NematiPour
 * \date    (original)  11-Jan-2021
 *
 */

// Qt
import QtQuick 2.12

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

/*!
 * \brief   StepIndicator
 * \details The Step indicator can have list of the steps and will show a bullet for each step with name and a line between each bullet.
 *          If the currentStepIndex has been set to any value in the range of the 0 to stepNames.length
 *          all the steps' bullets and the line between them from the beginning up to the currentStepIndex will be activated/highlighted.
 */
Rectangle { id: _root
    property bool   currentComplete     : false
    property bool   hideLabels          : false
    property bool   vertical            : false
    property var    stepNames           : []
    property int    spacing             : vertical ?  0 :  5
    property int    spacerLineLength    : vertical ?  5 : 75
    property int    currentStepIndex    : 0
    property int    diameter            : 15

    width   : _gridSteps.width
    height  : _gridSteps.height
    color   : Colors.backgroundMain

    QtObject { id: _private
        property string stepNamesFirst: ""
        property var    stepNamesRest : []
        function setupModel(names) {
            if ( names.length > 1 ) {
                for (let i = 0; i < names.length; i++) {
                    if (i === 0) {
                        stepNamesFirst = names[i]
                    }
                    else {
                        stepNamesRest[i-1] = names[i]
                    }
                }
            }
            else {
                if (names.length) stepNamesFirst = names[0]
                else              stepNamesFirst = ""
                stepNamesRest = []
            }
            /////////////////////////////////////////////////
            // it is so odd that when the stepNamesRest set by settings the change event is not called
            // so it has been called manually. I couldn't find why, and needs more investigation.
            // The good point is the binding of the model (_tailStepsRepeater.model) is called once.
            /////////////////////////////////////////////////
            if (stepNamesRest.length) stepNamesRestChanged()
        }
    }

    onStepNamesChanged: {
        _private.setupModel(_root.stepNames)
    }

    Grid { id: _gridSteps
        rows            : _root.vertical ? 0 : 1
        columns         : _root.vertical ? 1 : 0
        rowSpacing      : _root.spacing
        columnSpacing   : _root.spacing
        anchors.centerIn: parent
        StepBullet { id: _headStepBullet
            diameter        : _root.diameter
            currentComplete : _root.currentComplete
            hideLabels      : _root.hideLabels
            vertical        : _root.vertical
            text            : _private.stepNamesFirst
            complete        : currentStepIndex  > 0
            current         : currentStepIndex == 0
        }
        Repeater { id: _tailStepsRepeater
            model: _private.stepNamesRest
            // DEBUG : onModelChanged: console.debug(" 88888 ", _root.stepNames)
            Grid { id: _gridStepsRest
                rows            : _root.vertical ? 0 : 1
                columns         : _root.vertical ? 1 : 0
                rowSpacing      : _root.spacing
                columnSpacing   : _root.spacing
                verticalItemAlignment   : Grid.AlignVCenter
                horizontalItemAlignment : Grid.AlignHCenter
                Line { id   : _spacerLine
                    orientation: _root.vertical ? Line.Orientation.Vertical : Line.Orientation.Horizontal
                    length  : _root.spacerLineLength
                    color   : _nextStepsBullet.color
                }
                StepBullet { id: _nextStepsBullet
                    diameter        : _root.diameter
                    currentComplete : _root.currentComplete
                    hideLabels      : _root.hideLabels
                    vertical        : _root.vertical
                    text            : modelData
                    complete        : currentStepIndex > 0 && index <  currentStepIndex - 1 // first index is used for the head/first bullet
                    current         : currentStepIndex > 0 && index == currentStepIndex - 1 // first index is used for the head/first bullet
                }
            }
        }
    }
}