import React, {useEffect} from 'react';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import {Typography} from '@components/_core/Typography';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

const SNACK_BAR_HIDDEN_VALUE = 500;
const SNACK_BAR_ANIMATION_DURATION = 500;

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

export function Snackbar({message, show}: Props) {
  const {theme} = useTheme();
  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,
        {backgroundColor: theme.button.background.primary.default},
        animatedStyle,
      ]}>
      <Typography
        weight="semiBold"
        color={theme.text.neutral.inverted}
        numberOfLines={2}
        align="center">
        {message}
      </Typography>
    </Animated.View>
  ) : null;
}
