/*!
 *
 * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
 * \copyright                                                       \n
 *          THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM,  \n
 *          IN PART OR IN WHOLE,                                    \n
 *          WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER. \n
 *
 * \file    TouchArea.qml
 * \date    2019/01/09
 * \author  Behrouz NematiPour
 *
 */

// Qt
import QtQuick 2.12
import QtQuick.Controls 2.12

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

/*!
 * \brief   The TouchArea Component
 * which is used as a touchable component(s) container
 * with a title at the top
 * if set to be touchable will show an arrow right side of the title
 * next to the right edge of the component.
 */
Item { id : _root
    enum Orientation {
        Horizontal,
        Vertical
    }

    property string     title               : ""
    property int        titleLetterSpacing  : 3
    property bool       isTouchable         : true
    property int        orientation         : TouchArea.Orientation.Horizontal
    property list<Item> components

    property int titleVSpacing              : 20
    property int componentsHSpacing         : 80
    property int componentsVSpacing         :  0
    property int arrowSpacing               : 40

    signal clicked()

    width : _column.width + arrowSpacing
    height: _column.height
    clip: true

    Column { id: _column
        width   : Math.max(_titleText.width  , _grid.width)
        height  :          _titleText.height + _grid.height
        spacing : titleVSpacing
        Text { id: _titleText
            text: _root.title
            font.pixelSize: Fonts.fontPixelTouchAreaTitle
            font.letterSpacing: titleLetterSpacing
            color: Colors.touchTextAreaTitle
        }
        Grid { id: _grid
            columns : orientation === TouchArea.Orientation.Horizontal ? components.length  : 1
            rows    : orientation === TouchArea.Orientation.Vertical   ? components.length  : 1
            spacing : orientation === TouchArea.Orientation.Horizontal ? componentsHSpacing : componentsVSpacing
            children: components
        }
    }

    Image { id: _arrowImage
        visible: isTouchable
        anchors.right: parent.right
        anchors.top: parent.top
        width : Variables.arrowWidth
        height: Variables.arrowHeight
        source: "qrc:/images/iArrow"
    }

    MouseArea { id: _mouseArea
        anchors.fill: parent
        onClicked: {
            if (isTouchable) {
                _root.clicked()
            }
        }
    }
    Component.onCompleted: {
    }
}