/*!
 *
 * Copyright (c) 2020-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    GridSelection.qml
 * \author  (last)      Behrouz NematiPour
 * \date    (last)      31-Mar-2023
 * \author  (original)  Peter Lucia
 * \date    (original)  25-Sep-2020
 *
 */

// Qt
import QtQuick 2.12

// Project

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


/*!
 * \brief   A selectable grid of options with customizable number of rows and columns
 *          where only one option is selected by the user
 */
Rectangle { id: _root
    property int    rowCount        :  _rowCount
    property int    colCount        :  _colCount
    property int    curIndex        : -1
    property int    optionHeight    : Variables.gridSelectionButtonHeight
    property int    optionWidth     : Variables.gridSelectionButtonWidth
    property alias  title           : _title.text
    property var    labels          : []
    property bool   active          : false
    property bool   valid           : true

    readonly property int _itemCount: labels.length
    readonly property int _rowCount : Math.ceil( _itemCount / _colCount )
    readonly property int _colCount : 2

    anchors.horizontalCenter: parent.horizontalCenter
    color   : Colors.transparent
    height  : _root.rowCount * _root.optionHeight + _title.height + _grid.anchors.topMargin
    width   : _root.colCount * _root.optionWidth

    signal clicked(int vIndex)

    function reset() {
        _root.curIndex = -1
        _root.active   = false
    }

    Text { id           : _title
        text            : ""
        color           : _root.valid ? Colors.textMain : Colors.createTreatmentInvalidParam
        font.pixelSize  : Fonts.fontPixelFluidText
    }

    Grid { id   : _grid
        spacing : 5
        anchors {
            top         : _title.bottom
            topMargin   : Variables.sliderTextMargin
        }
        rows    : _root.rowCount
        columns : _root.colCount
        Repeater { id   : _repeater
            model       : labels
            TouchRect { id  : _touchRect
                objectName  : _root.objectName + index
                text.text   : modelData
                selectable  : true
                height      : _root.optionHeight
                width       : _root.optionWidth
                radius      : Variables.dialogRadius
                selected    : _root.curIndex > -1 ? index === _root.curIndex : false
                onClicked: {
                    _root.curIndex = index
                    _root.clicked  ( index )
                    _root.active   = true
                }
            }
        }
    }
}