// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React from 'react';

/**
 * A custom hook to implement an animationend listener on the provided ref
 * @param {object} ref - A reference to a DOM element to add the listener to
 * @param {function} callback - A callback function that will be run for matching animation events
 * @param {string} animationName - The name of the animation to listen for
 * @param {boolean} listenForEventBubbling - A parameter that when true, listens for events on the target element and
 *   bubbled from all descendent elements but when false, only listens for events coming from the target element and
 *   ignores events bubbling up from descendent elements
 */
function useAnimationEnd(
    ref,
    callback,
    animationName,
    listenForEventBubbling = true,
) {
    React.useEffect(() => {
        if (!ref.current) {
            return undefined;
        }

        function handleAnimationend(event) {
            if (!listenForEventBubbling && event.target !== ref.current) {
                return;
            }
            if (animationName && animationName !== event.animationName) {
                return;
            }
            callback(event);
        }

        ref.current.addEventListener('animationend', handleAnimationend);

        return () => {
            ref.current.removeEventListener('animationend', handleAnimationend);
        };
    }, [ref, callback, animationName, listenForEventBubbling]);
}

export default useAnimationEnd;
