import React, {memo} from 'react';
import {useTranslation} from 'react-i18next';
import {IconX} from '@tabler/icons-react-native';
import {Pressable} from 'react-native-gesture-handler';
import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
import {Polygon, Svg} from 'react-native-svg';
import {Typography} from '@components/_core';
import {useTheme} from '@shared/theme';

import {TRIANGLE_H, TRIANGLE_W, styles} from './styles';

interface Props {
  onHide: () => void;
}

const CLOSE_BUTTON_HIT_SLOP = {
  top: 10,
  bottom: 10,
  left: 10,
  right: 10,
};

function RecordingHintBubble({onHide}: Props) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();

  return (
    <Animated.View
      entering={FadeIn}
      exiting={FadeOut}
      style={[styles.container, {backgroundColor: theme.brand[500]}]}>
      <Typography
        style={styles.title}
        variant="xs"
        color={theme.text.neutral.inverted}>
        {t('chat.recording.hint_bubble')}
      </Typography>
      <Pressable hitSlop={CLOSE_BUTTON_HIT_SLOP} onPress={onHide}>
        <IconX color={theme.text.neutral.inverted} size={iconSizes.x4} />
      </Pressable>
      <Svg
        style={styles.triangle}
        width={TRIANGLE_W}
        height={TRIANGLE_H}
        viewBox="0 0 12 6">
        <Polygon points={`0,0 12,0 6,6`} fill={theme.brand[500]} />
      </Svg>
    </Animated.View>
  );
}

export default memo(RecordingHintBubble);
