import React, {memo, useCallback, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useMutation, useQueryClient} from '@tanstack/react-query';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {useNavigation} from '@react-navigation/native';
import {IconShare3} from '@tabler/icons-react-native';
import {Button, Dialog, Typography} from '@components';
import {PERFORMANCE_QUERY_KEYS} from '@modules/performance/constants';
import {UserReview} from '@modules/performance/interfaces';
import {shareReview} from '@modules/performance/services';
import {showSnackbar} from '@redux/dispatchers';
import {AMPLITUDE_EVENTS} from '@shared/constants';
import {logAmplitudeEvent} from '@shared/utils';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

const normalizeSummary = (summary?: string) => {
  return summary ? summary.replace(/\n/g, '<br>') : undefined;
};

interface Props {
  cycleId: number;
  reviewId: number;
  user: UserReview;
  summary?: string;
}

function ShareButton({cycleId, reviewId, user, summary}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const navigation = useNavigation();
  const queryClient = useQueryClient();
  const [showShareModal, setShowShareModal] = useState(false);

  const {mutate, isPending} = useMutation({
    mutationFn: (params: {userId: number}) =>
      shareReview({
        cycleId,
        summary: normalizeSummary(summary),
        ...params,
      }),
    onSuccess: () => {
      // Clear query cache of review
      queryClient.refetchQueries({
        queryKey: PERFORMANCE_QUERY_KEYS.formDetail(cycleId, reviewId),
      });
      // Clear query cache of current cycle review
      queryClient.invalidateQueries({
        queryKey: PERFORMANCE_QUERY_KEYS.cycleDetail(cycleId),
      });
      // Show snackbar with success feedback
      showSnackbar({
        title: t('performance.form.share_success'),
        variant: 'success',
      });
      queryClient.invalidateQueries({
        queryKey: PERFORMANCE_QUERY_KEYS.formDetail(cycleId, reviewId),
      });
      logAmplitudeEvent(AMPLITUDE_EVENTS.PERF_REV_REVIEW_SHARED, {
        reviewId,
        cycleId,
        origin: 'admin',
      });
      navigation.goBack();
    },
  });

  const {bottom: paddingBottom} = useSafeAreaInsets();

  const onSharePress = useCallback(() => {
    setShowShareModal(true);
  }, []);

  const onCloseShareModal = useCallback(() => {
    setShowShareModal(false);
  }, []);

  const onConfirmShare = useCallback(() => {
    setShowShareModal(false);
    mutate({
      userId: user!.userId,
    });
  }, [mutate, user]);

  return (
    <>
      <View
        style={[
          styles.shareButton,
          {
            backgroundColor: theme.background.layout.tertiary,
            paddingBottom,
            shadowColor: theme.shadow.inverted,
          },
        ]}>
        <Button
          text={t('general.share')}
          onPress={onSharePress}
          IconRight={IconShare3}
          isLoading={isPending}
        />
      </View>
      <Dialog
        isVisible={showShareModal}
        onClose={onCloseShareModal}
        withCloseButton={false}
        title={t('performance.form.share_modal.title', {
          name: user.firstName,
        })}
        titleNumberOfLines={2}
        footer={{
          primaryButton: {
            text: t('performance.form.share_modal.accept'),
            onPress: onConfirmShare,
            IconRight: IconShare3,
          },
          secondaryButton: {
            text: t('general.cancel'),
            onPress: onCloseShareModal,
          },
        }}>
        <Typography>
          {t('performance.form.share_modal.description', {
            name: user.firstName,
          })}
        </Typography>
      </Dialog>
    </>
  );
}

export default memo(ShareButton);