import React, {useState} from 'react';
import {useTranslation} from 'react-i18next';
import {useMutation} from 'react-query';
import {useNavigation} from '@react-navigation/native';
import {IconEdit, IconTrash} from '@tabler/icons-react-native';
import {Dialog, ListRow, Typography} from '@components';
import {useGoBack} from '@hooks/useGoBack';
import {DraftPost, DraftState} from '@modules/drafts/interfaces';
import {rejectDraft} from '@modules/drafts/services';
import {removeDraftFromList} from '@modules/drafts/utils';
import {showSnackbar} from '@redux/dispatchers';
import {Screens} from '@shared/constants';

import {styles} from './styles';

interface OptionsDialogProps {
  onClose: () => void;
  draft: Nullable<DraftPost>;
  mine: boolean;
}

function OptionsDialog({onClose, mine, draft}: OptionsDialogProps) {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const {goBack} = useGoBack();
  const [deleteDialogDraft, setDeleteDialogDraft] =
    useState<Nullable<DraftPost>>(null);

  const {isLoading, mutate} = useMutation({
    mutationFn: () => rejectDraft(deleteDialogDraft!.id),
    onSuccess: () => {
      showSnackbar({
        title: t('drafts.detail.reject_draft_success_title'),
        description: t('drafts.detail.reject_draft_success_description'),
        variant: 'success',
      });
      removeDraftFromList(deleteDialogDraft!.id, DraftState.InProgress, mine);
      removeDraftFromList(
        deleteDialogDraft!.id,
        deleteDialogDraft!.state,
        mine,
      );
      onClose();
      onCloseDeleteDialog();
      goBack();
    },
  });

  const onCloseDeleteDialog = () => setDeleteDialogDraft(null);

  const onEditDraft = () => {
    onClose();
    draft && navigation.navigate(Screens.EDIT_DRAFT, {draft, mine});
  };

  const onDeleteDraft = () => {
    setTimeout(() => setDeleteDialogDraft(draft), 800);
    onClose();
  };

  return (
    <>
      <Dialog
        onClose={onClose}
        isVisible={!!draft}
        title={t('general.options')}
        contentStyle={styles.content}>
        <ListRow onPress={onEditDraft}>
          <ListRow.Avatar Icon={IconEdit} />
          <ListRow.Title title={t('general.edit')} />
          <ListRow.SideContent withRightIcon />
        </ListRow>
        <ListRow onPress={onDeleteDraft}>
          <ListRow.Avatar Icon={IconTrash} />
          <ListRow.Title title={t('general.delete')} />
          <ListRow.SideContent withRightIcon />
        </ListRow>
      </Dialog>
      <Dialog
        onClose={onCloseDeleteDialog}
        titleNumberOfLines={2}
        isVisible={!!deleteDialogDraft}
        title={t('drafts.detail.reject_draft_title')}
        footer={{
          primaryButton: {
            isLoading: isLoading,
            onPress: mutate,
            text: t('drafts.detail.reject_draft_title'),
          },
        }}>
        <Typography>{t('drafts.detail.reject_draft_description')}</Typography>
      </Dialog>
    </>
  );
}

export default OptionsDialog;