import React from 'react';
import Animated, {
  Extrapolate,
  interpolate,
  useAnimatedStyle,
} from 'react-native-reanimated';
import {TouchableWithoutFeedback} from 'react-native';
import {BottomSheetBackdropProps} from '@gorhom/bottom-sheet';
import {BACKDROP} from '@shared/styles';

import {styles} from './styles';

interface Props extends BottomSheetBackdropProps {
  backgroundColor?: string;
  show?: boolean;
  onClose?: () => void;
}

function BottomSheetBackdrop({
  animatedIndex,
  show,
  onClose,
  backgroundColor = BACKDROP.color,
}: Props) {
  const containerAnimatedStyle = useAnimatedStyle(() => {
    return {
      opacity: interpolate(
        animatedIndex.value,
        [-1, 0],
        [0, BACKDROP.opacity],
        Extrapolate.CLAMP,
      ),
    };
  });

  if (!show) {
    return null;
  }
  return (
    <TouchableWithoutFeedback onPress={onClose}>
      <Animated.View
        style={[styles.container, {backgroundColor}, containerAnimatedStyle]}
      />
    </TouchableWithoutFeedback>
  );
}

export default BottomSheetBackdrop;
