import React from 'react';
import Animated, {
  Extrapolate,
  interpolate,
  useAnimatedStyle,
} from 'react-native-reanimated';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {BottomSheetFooterProps} from '@gorhom/bottom-sheet';

interface Props extends BottomSheetFooterProps {
  extraOffset?: number;
  maxSnapPoint: number;
}

export const EXTRA_OFFSET = 30;

function BottomSheetFooter({
  animatedFooterPosition,
  maxSnapPoint,
  extraOffset = EXTRA_OFFSET,
}: Props) {
  const {top, bottom} = useSafeAreaInsets();
  const maxValue = maxSnapPoint - top - bottom;
  const containerAnimatedStyle = useAnimatedStyle(() => {
    return {
      height:
        extraOffset +
        interpolate(
          animatedFooterPosition.value,
          [0, maxValue],
          [maxValue, 0],
          Extrapolate.CLAMP,
        ),
    };
  });
  return <Animated.View style={containerAnimatedStyle} />;
}

export default BottomSheetFooter;
