import { FC } from 'react';

import { useModal } from '@material-hu/hooks/useModal';
import DeleteOutlineOutlinedIcon from '@material-hu/icons/material/DeleteOutlineOutlined';
import IconButton from '@material-hu/mui/IconButton';
import Tooltip from '@material-hu/mui/Tooltip';

import HuDialog from '@material-hu/components/design-system/Dialog';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

export type DeleteSchedulePostProps = {
  handleDeletePost: any;
};

const DeleteSchedulePost: FC<DeleteSchedulePostProps> = props => {
  const { handleDeletePost } = props;

  const { t } = useTranslation();

  const onDelete = () => {
    handleDeletePost();
    closeConfirmModal();
  };

  const {
    modal: confirmModal,
    showModal: showConfirmModal,
    closeModal: closeConfirmModal,
  } = useModal(
    HuDialog,
    {
      fullWidth: true,
      maxWidth: 'sm',
      sx: { zIndex: 2000 },
    },
    {
      title: t('general:confirmation') ?? '',
      textBody: t('COMMENTS:CONFIRM_DELETE_POST') ?? '',
      primaryButtonProps: {
        children: t('general:accept'),
        onClick: onDelete,
        loading: handleDeletePost.isLoading,
      },
      secondaryButtonProps: {
        children: t('general:cancel'),
        onClick: () => closeConfirmModal(),
      },
    },
  );

  return (
    <>
      <Tooltip
        title={t('post:delete_post')}
        placement="top"
      >
        <IconButton
          onClick={() => showConfirmModal()}
          color="error"
          sx={{
            minWidth: '24px',
            height: '24px',
            mt: { xs: 1, sm: 0 },
          }}
        >
          <DeleteOutlineOutlinedIcon fontSize="small" />
        </IconButton>
      </Tooltip>
      {confirmModal}
    </>
  );
};

export default DeleteSchedulePost;
