import QtQuick
import qs.config
import qs.custom
import qs.services

MouseArea {
    id: root

    property bool disabled
    property color color: Config.colors.primary
    property real radius: 1000

    function onClicked(): void {}

    cursorShape: disabled ? undefined : Qt.PointingHandCursor
    hoverEnabled: true

    onPressed: event => {
        rippleAnim.x = event.x;
        rippleAnim.y = event.y;

        const dist = (ox, oy) => ox * ox + oy * oy;
        rippleAnim.radius = Math.sqrt(Math.max(dist(0, 0), dist(0, width), dist(width, 0), dist(width, height)));

        rippleAnim.restart();
    }

    onClicked: event => !disabled && onClicked(event)

    SequentialAnimation {
        id: rippleAnim

        property real x
        property real y
        property real radius

        PropertyAction {
            target: ripple
            property: "x"
            value: rippleAnim.x
        }
        PropertyAction {
            target: ripple
            property: "y"
            value: rippleAnim.y
        }
        PropertyAction {
            target: ripple
            property: "opacity"
            value: 0.1
        }
        ParallelAnimation {
            Anim {
                target: ripple
                properties: "implicitWidth,implicitHeight"
                from: 0
                to: rippleAnim.radius * 2
                duration: Config.anim.durations.large
                easing.bezierCurve: Config.anim.curves.standardDecel
            }
            Anim {
                target: ripple
                property: "opacity"
                to: 0
                duration: Config.anim.durations.large
                easing.type: Easing.BezierSpline
                easing.bezierCurve: Config.anim.curves.standardDecel
            }
        }
    }

    CustomClippingRect {
        id: hoverLayer

        anchors.fill: parent

        property real alpha: root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.05 : 0
        color: Qt.alpha(root.color, alpha)
        radius: root.radius

        Behavior on alpha {
            Anim {
                duration: Config.anim.durations.small
            }
        }

        CustomRect {
            id: ripple

            radius: 1000
            color: root.color
            opacity: 0

            transform: Translate {
                x: -ripple.width / 2
                y: -ripple.height / 2
            }
        }
    }
}