'use client';

import { RippleProps } from './ripple.types';
import { rippleAreaContext } from './ripple-effect';
import React, { useContext, useLayoutEffect, useState } from 'react';

const Ripple = ({
    rippleX,
    rippleY,
    rippleS,
    lifetime,
    rippleKey,
    endLifetime,
}: RippleProps) => {
    const [classes, setClasses] = useState<string>('m3 ripple visible');
    const rippleDomainContext = useContext(rippleAreaContext);

    useLayoutEffect(() => {
        if (endLifetime && !rippleDomainContext) {
            setClasses('m3 ripple');
            setTimeout(() => endLifetime(rippleKey), lifetime);
        }
    }, [rippleDomainContext]);

    return (
        <span
            className={classes}
            style={{
                left: -(rippleS / 2) + rippleX,
                top: -(rippleS / 2) + rippleY,
                width: rippleS,
                aspectRatio: 1,
            }}
        />
    );
};

export { Ripple };