/*!
 * 
 * Copyright (c) 2019-2020 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 TouchRect.qml
 * \author (last) Behrouz NemaiPour
 * \date (last) 15-Jun-2020
 * \author (original) Behrouz NematiPour
 * \date (original) 18-Oct-2019
 * 
 */

// Qt
import QtQuick 2.12

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

/*!
 * \brief   The TouchRect Component
 * which is used a general default round rect button
 */
Rectangle { id : _root
    property alias text             : _text
    property alias button           : _mouseArea

    property bool  animated         : false
    property alias loops            : _clickAnimation.loops
    property int   duration         : 200

    property bool  disabled         : false

    property color textColor        : Colors.textButton
    property color borderColor      : Colors.borderButton
    property color backgroundColor  : Colors.backgroundButtonNormal

    signal clicked

    onDurationChanged: {
        _colorAnimationOn .duration = duration
        _colorAnimationOff.duration = duration
    }

    function animate(vAnimate) {
        if (vAnimate) {
            if ( disabled ) { return }
            if ( animated ) {
                _clickAnimation.restart()
            }
        } else {
            _clickAnimation.stop()
            _root.color = backgroundColor
        }
    }

    onDisabledChanged: {
        if (disabled) {
            text.color   = Colors.textDisableButton
            border.color = Colors.borderDisableButton
            color = "Transparent"
        } else {
            text.color   = textColor
            border.color = borderColor
            color = backgroundColor
        }
    }

    width   : Variables.touchRectWidth
    height  : Variables.touchRectHeight
    radius  : Variables.touchRectRadius
    color   : backgroundColor
    border {
        color: borderColor
        width: Variables.borderWidth
    }
    Text { id: _text
        anchors.centerIn: parent
        color: textColor
        font.pixelSize: Fonts.fontPixelButton
    }
    MouseArea { id: _mouseArea
        anchors.fill: parent
        onClicked   : {
            if ( disabled ) { return }
            animate(true)
            _root.clicked()
        }
    }

    SequentialAnimation { id: _clickAnimation
        running: false
        onStopped: {
            _root.color = backgroundColor
        }
        onFinished: {
            _root.color = backgroundColor
        }
        PropertyAnimation { id: _colorAnimationOn ; target: _root; property: "color"; to: _root.border.color; duration: duration; }
        PropertyAnimation { id: _colorAnimationOff; target: _root; property: "color"; to: _root.color       ; duration: duration; }
    }
}