import React from "react";
import { Animated, ViewStyle } from "react-native";

import {
  useModalAnimationContext,
  PlayerAnimationStateEnum,
} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";

type Props = {
  style: ViewStyle[];
  children: React.ReactNode;
};

export const AnimatedPlayerModalWrapper = (props: Props) => {
  const {
    playerAnimationState,
    animatedValues: { lastScrollY, dragScrollY, translateYOffset },
    modalSnapPoints,
    setStartComponentsAnimation,
  } = useModalAnimationContext();

  const interpolateConfig: Animated.InterpolationConfigType = React.useMemo(
    () => ({
      inputRange: modalSnapPoints,
      outputRange: modalSnapPoints,
      extrapolate: "clamp",
    }),
    [modalSnapPoints]
  );

  let translateY;

  if (playerAnimationState === PlayerAnimationStateEnum.drag_player) {
    translateY = translateYOffset.interpolate(interpolateConfig);
  } else {
    const reverseLastScrollY = Animated.multiply(
      new Animated.Value(-1),
      lastScrollY
    );

    translateY = Animated.add(
      translateYOffset,
      Animated.add(dragScrollY, reverseLastScrollY)
    ).interpolate(interpolateConfig);
  }

  React.useEffect(() => {
    (playerAnimationState === PlayerAnimationStateEnum.minimize ||
      playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
      setStartComponentsAnimation(true);
  }, [playerAnimationState]);

  return (
    <Animated.View
      style={[props.style, { transform: [{ translateY: translateY }] }]}
    >
      {props.children}
    </Animated.View>
  );
};