import { FC } from 'react';

import HuAlert from '@material-hu/components/design-system/Alert';

import useFormatDate from 'src/hooks/useFormatDate';
import { DraftRequest, DraftStatus } from 'src/types/posts';
import { useLokaliseTranslation } from 'src/utils/i18n';

type ScheduledPostAlertProps = {
  draftDetail: DraftRequest;
};

const ScheduledPostAlert: FC<ScheduledPostAlertProps> = ({ draftDetail }) => {
  const { t } = useLokaliseTranslation(['drafts']);
  const { formatDate } = useFormatDate();

  if (!draftDetail.isScheduled) {
    return null;
  }

  return (
    <HuAlert
      severity={draftDetail.state === DraftStatus.OVERDUE ? 'warning' : 'info'}
      title={t('detail.scheduled_post', {
        context: draftDetail.state,
      })}
      description={t(
        `detail.scheduled_post${draftDetail.state === DraftStatus.OVERDUE ? '_overdue' : ''}_description`,
        {
          date: formatDate(draftDetail.post.publicationDatetime, `dd/MMM/yyyy`),
          time: formatDate(draftDetail.post.publicationDatetime, `HH:mm`),
        },
      )}
      sx={{ mb: 3 }}
    />
  );
};

export default ScheduledPostAlert;