import React, {useEffect} from 'react';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import Text from '@components/Text';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

const SNACK_BAR_HIDDEN_VALUE = 500;
const SNACK_BAR_ANIMATION_DURATION = 500;

interface Props {
  show: boolean;
  message: string;
}

export function Snackbar({show, message}: Props) {
  const translateY = useSharedValue(SNACK_BAR_HIDDEN_VALUE);

  useEffect(() => {
    translateY.value = withTiming(show ? -50 : SNACK_BAR_HIDDEN_VALUE, {
      duration: SNACK_BAR_ANIMATION_DURATION,
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [show]);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{translateY: translateY.value}],
    };
  });

  return show ? (
    <Animated.View style={[styles.snackbar, animatedStyle]}>
      <Text
        variant="subtitle1"
        color={COLORS.WHITE}
        numberOfLines={2}
        align="center">
        {message}
      </Text>
    </Animated.View>
  ) : null;
}
