import React, {memo, useEffect} from 'react';
import {IconSparkles} from '@tabler/icons-react-native';
import Animated, {
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import {FABButton} from '@components';

import {CHATBOT_NAME} from '../../constants';
import {styles} from './styles';

interface Props {
  show: boolean;
  onPress: () => void;
}

function BotButton({show, onPress}: Props) {
  const sharedValue = useSharedValue(0);

  useEffect(() => {
    if (show) {
      sharedValue.value = withTiming(1, {
        duration: 250,
        easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
      });
    }
  }, [show, sharedValue]);

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

  return (
    <Animated.View style={[styles.container, animatedStyle]}>
      <FABButton
        Icon={IconSparkles}
        onPress={onPress}
        text={CHATBOT_NAME}
        size="sm"
      />
    </Animated.View>
  );
}

export default memo(BotButton);
