/*!
 *
 * Copyright (c) 2021-2023 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    CheckListView.qml
 * \author  (last)      Behrouz NematiPour
 * \date    (last)      28-Jun-2021
 * \author  (original)  Behrouz NematiPour
 * \date    (original)  16-Mar-2021
 *
 */

// Qt
import QtQuick 2.12

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

/*!
 * \brief   The Check list view is a dynamic check list items which gets list of strings as model
 * \details and dynamically creates list of items which can be later set as started/done to have
 *          busy circile or check mark as done.
 */
Item { id: _root

    property var    stepNames       : []
    property int    completeMargin  : 50
    property alias  completeVisible : _completeText.visible
    property alias  completeText    : _completeText.text
    property int    delegateWidth   : Variables.checkListViewItemWidth
    property int    delegateHeight  : Variables.checkListViewItemHeight

    property bool   timeVisible     : false
    property int    timeSeconds     : 0

    function resetItems() {
        if ( visible ) {
            for (let i = 0; i < _listView.count; i++) {
                let model = _listView.itemAt(i)
                model.stepStart = false
                model.stepDone  = false
            }
        }
    }
    function setItem(vIndex, vEntered) {
        let model = _listView.itemAt(vIndex)
        if ( vEntered ) model.stepStart = true
        else            model.stepDone  = true
    }

    width   : _root.delegateWidth
    height  : _root.delegateHeight * _root.stepNames.length

    Column {
        anchors.centerIn: _root
        Repeater { id: _listView
            model   : _root.stepNames
            delegate: Item { id: _delegate
                property bool stepStart   : false
                property bool stepDone    : false

                property int linePad: 15
                width   : _root.delegateWidth
                height  : _root.delegateHeight
                Text { id: _stepText
                    verticalAlignment: Text.AlignVCenter
                    text    : modelData
                    anchors.fill: parent
                    color   : Colors.textMain
                    font.pixelSize: Fonts.fontPixelStateListText
                }
                Line { id: _separatorLine
                    length          : _delegate.width + 2 * linePad
                    thickness       : 2
                    anchors {
                        bottom      : _delegate.bottom
                        left        : _delegate.left
                        leftMargin  : -linePad
                    }
                }
                WaitDone { id: _waitDone
                    anchors.verticalCenter: _delegate.verticalCenter
                    anchors.right: _delegate.right
                    diameter: _delegate.height * 0.5
                    visible : _delegate.stepStart
                    done    : _delegate.stepDone
                }
                TimeText { id: _timeText
                    anchors.verticalCenter  : _stepText.verticalCenter
                    anchors.left            : _separatorLine.right
                    anchors.leftMargin      : Variables.minVGap
                    seconds                 : _root.timeSeconds * 60
                    secondsVisible          : false
                    textPixelSize           : Fonts.fontPixelStateListText
                    visible                 : _root.timeVisible && _delegate.stepStart && ! _delegate.stepDone
                }
            }
        }
    }

    Text { id: _completeText
        visible: false
        anchors {
            top             : _root.bottom
            topMargin       : _root.completeMargin
            horizontalCenter: _root.horizontalCenter
        }
        text    : qsTr("Complete!")
        color   : Colors.textMain
        font.pixelSize: Fonts.fontPixelNotification
    }
}