/*!
 *
 * Copyright (c) 2020-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    TouchArea.qml
 * \author  (last)      Behrouz NematiPour
 * \date    (last)      26-Sep-2023
 * \author  (original)  Behrouz NematiPour
 * \date    (original)  11-Jan-2020
 *
 */

// Qt
import QtQuick 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.
 */
Rectangle { id : _root
    property string     title               : ""
    property int        titleLetterSpacing  : 3
    property bool       isTouchable         : true
    property bool       hasArrow            : true

    property alias      notification        : _notification

    signal clicked()

    color: "transparent"
    clip  : false

    Text { id: _titleText
        anchors {
            top: parent.top
            left: parent.left
        }
        height: Variables.arrowHeight
        verticalAlignment: Text.AlignVCenter
        text: _root.title
        font {
            pixelSize: Fonts.fontPixelTouchAreaTitle
            letterSpacing: titleLetterSpacing
        }
        color: Colors.touchTextAreaTitle
    }

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

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

    Component.onCompleted: {
    }

    NotificationBarSmall { id: _notification
        height  : 25
        imageAutoSize: true
        color: "transparent"
        anchors {
            bottom  : parent.bottom
            left    : parent.left
            right   : parent.right
        }
        imageSource : ""
        text        : ""
        textColor   : "gray"
        textfontSize: 16
        rowAnchors.centerIn: null
    }
}