import { useRef } from 'react';

import useStableMemo from '@cleartrip/ct-design-use-stable-memo';

import AnimatedStyle from '../AnimatedStyle/AnimatedStyle.native';
import { AnimatedStyle as INativeAnimatedStyle } from '../AnimatedStyle/type';
import { AnimatedStyleWithController, IAnimatedRef } from '../type';

/**
 * @description Hook to create animated styles and controller from a sequence
 * @param animatedStyles - The sequence of animated styles
 * @param deps - The dependencies to (re)create the styles
 * @returns A tuple of the styles and controller
 * @example
 * const styleA = useAnimatedStyles({
 *   from: { opacity: 0 },
 *   to:   { opacity: 1 },
 * }, [dependencies]);
 *
 * const styleB = useAnimatedStyles({
 *   from: { translateX: 0 },
 *   to:   { translateX: 100 },
 * }, [dependencies]);
 *
 * const [styles, controller] = useAnimatedStylesInSequence([styleA, styleB], [dependencies]);
 */
export const useAnimatedStylesInSequence = (animatedStyles: AnimatedStyleWithController[], deps: unknown[]) => {
  const elementRef = useRef<IAnimatedRef | null>(null);

  const styles = useStableMemo(() => {
    return new AnimatedStyle(animatedStyles, elementRef as React.RefObject<IAnimatedRef>);
  }, [deps]);

  const controller = {
    /**
     * @description Start the animation
     * @returns void
     * @example
     * controller.start?.();
     */
    start() {
      elementRef?.current?.start?.();
    },
  };

  return [styles, controller] as unknown as [INativeAnimatedStyle, typeof controller];
};