import React from 'react';
import {useTranslation} from 'react-i18next';
import {Dialog, Typography} from '@components';
import {PostApprovalStatus} from '@modules/group/interfaces';

interface Props {
  isVisible: boolean;
  onClose: () => void;
  onSubmit: () => void;
  count?: number;
  isLoading?: boolean;
  status?: Exclude<PostApprovalStatus, PostApprovalStatus.PENDING>;
  isEditionPost?: boolean;
}

const stringsStatusMap = {
  [PostApprovalStatus.REJECTED]: {
    title: 'group.manage_post_approvals.reject_posts_dialog_title',
    message: 'group.manage_post_approvals.reject_posts_dialog_message',
    submitButton: 'group.manage_post_approvals.reject_post',
  },
  [PostApprovalStatus.APPROVED]: {
    title: 'group.manage_post_approvals.approve_posts_dialog_title',
    message: 'group.manage_post_approvals.approve_posts_dialog_message',
    submitButton: 'group.manage_post_approvals.approve_post',
  },
};

const editionStringsStatusMap = {
  [PostApprovalStatus.REJECTED]: {
    titleOne: 'group.pending_post_review_modal_title_reject_edition',
    titleOther: 'group.pending_post_review_modal_title_reject_selected_edition',
    messageOne: 'group.pending_post_review_modal_body_reject_edition',
    messageOther:
      'group.pending_post_review_modal_body_reject_selected_edition',
    submitButton: 'group.manage_post_approvals.reject_post',
  },
  [PostApprovalStatus.APPROVED]: {
    titleOne: 'group.pending_post_review_modal_title_approve_edition',
    titleOther:
      'group.pending_post_review_modal_title_approve_selected_edition',
    messageOne: 'group.pending_post_review_modal_body_approve_edition',
    messageOther:
      'group.pending_post_review_modal_body_approve_selected_edition',
    submitButton: 'group.manage_post_approvals.approve_post',
  },
};

const ConfirmActionBottomModal = ({
  isVisible,
  onClose,
  onSubmit,
  status = PostApprovalStatus.APPROVED,
  isLoading,
  count,
  isEditionPost,
}: Props) => {
  const {t} = useTranslation();

  const strings = isEditionPost
    ? {
        title:
          count === 1
            ? editionStringsStatusMap[status].titleOne
            : editionStringsStatusMap[status].titleOther,
        message:
          count === 1
            ? editionStringsStatusMap[status].messageOne
            : editionStringsStatusMap[status].messageOther,
        submitButton: editionStringsStatusMap[status].submitButton,
      }
    : stringsStatusMap[status];

  return (
    <Dialog
      isVisible={isVisible}
      titleNumberOfLines={3}
      title={t(strings.title, {count})}
      onClose={onClose}
      footer={{
        primaryButton: {
          text: t(strings.submitButton, {count}),
          onPress: onSubmit,
          isLoading,
        },
        secondaryButton: {
          text: t('group.manage_post_approvals.cancel'),
          onPress: onClose,
          variant: 'tertiary',
        },
      }}>
      <Typography align="center">{t(strings.message, {count})}</Typography>
    </Dialog>
  );
};

export default ConfirmActionBottomModal;
