import React, {useCallback, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {useMutation} from '@tanstack/react-query';
import {useDispatch} from 'react-redux';
import {IconEdit, IconTrash} from '@tabler/icons-react-native';
import {Typography, Dialog, ListItem} from '@components';
import {useBackHandler} from '@hooks/useBackHandler';
import {BaseEventPostParams, EventPost} from '@modules/events/interfaces';
import {deleteEventPost} from '@modules/events/services';
import {useEventPostsStore} from '@modules/events/store/useEventPostsStore';
import {showSnackbar} from '@redux/events';
import {useUserId} from '@redux/selectors';

import {styles} from './styles';

interface Props {
  post: EventPost;
  onCloseDialog: () => void;
  onEditPost: () => void;
}

function PostOptionsDialog({
  post: {eventId, id, user},
  onCloseDialog,
  onEditPost,
}: Props) {
  const dispatch = useDispatch();
  const {t} = useTranslation();
  const userId = useUserId();
  const [showDeleteText, setShowDeleteText] = useState(false);
  const removePost = useEventPostsStore(state => state.removePost);
  const {mutate: deleteEventPostMutation, isPending} = useMutation<
    null,
    Error,
    BaseEventPostParams
  >({
    mutationFn: deleteEventPost,
    onSuccess: () => {
      removePost(eventId, id);
      onCloseDialog();
      dispatch(
        showSnackbar({
          title: t('events.post_deleted'),
          variant: 'success',
        }),
      );
    },
  });

  const onGoBack = useCallback(() => {
    showDeleteText ? setShowDeleteText(false) : onCloseDialog();
    return true;
  }, [onCloseDialog, showDeleteText]);
  useBackHandler(onGoBack);

  const onConfirmDelete = () => {
    deleteEventPostMutation({eventId, postId: id});
  };

  const onPressDelete = () => setShowDeleteText(true);

  const onCancelDelete = () => setShowDeleteText(false);

  return (
    <Dialog
      isVisible
      onClose={onCloseDialog}
      title={t(
        `events.${
          showDeleteText ? 'delete_post_sure' : 'event_post_options_title'
        }`,
      )}
      titleNumberOfLines={2}
      footer={
        showDeleteText
          ? {
              primaryButton: {
                isLoading: isPending,
                text: t('general.delete'),
                onPress: onConfirmDelete,
              },
              secondaryButton: {
                text: t('general.cancel'),
                onPress: onCancelDelete,
              },
            }
          : undefined
      }>
      {showDeleteText ? (
        <Typography>{t('events.delete_post_sure_description')}</Typography>
      ) : (
        <>
          {user.id === userId && (
            <ListItem
              avatar={{Icon: IconEdit}}
              onItemPress={onEditPost}
              title={t('general.edit')}
              style={styles.listItem}
            />
          )}
          <ListItem
            avatar={{Icon: IconTrash}}
            onItemPress={onPressDelete}
            title={t('general.delete')}
            style={styles.listItem}
          />
        </>
      )}
    </Dialog>
  );
}

export default PostOptionsDialog;