import { FC } from 'react';

import { IconCalendarClock } from '@material-hu/icons/tabler';

import HuListItem from '@material-hu/components/design-system/List/components/ListItem';
import HuMenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';
import { MenuItemProps } from '@material-hu/components/design-system/Menu/components/MenuItem/types';

import { useMoreMenu } from 'src/contexts/MoreMenuContext';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

export type ReschedulePostMenuItemProps = Omit<MenuItemProps, 'id'> & {
  onOpenDrawer: () => void;
};

const ReschedulePostMenuItem: FC<ReschedulePostMenuItemProps> = props => {
  const { onOpenDrawer, ...menuProps } = props;
  const { t } = useTranslation('post');
  const { closeMenu } = useMoreMenu();

  const handleReschedule = () => {
    onOpenDrawer();
    closeMenu();
  };

  return (
    <HuMenuItem
      {...menuProps}
      onClick={handleReschedule}
      sx={{ p: 0 }}
    >
      <HuListItem
        sx={{ p: 0 }}
        avatar={{ Icon: IconCalendarClock }}
        text={{ title: t('post:reschedule_post') }}
      />
    </HuMenuItem>
  );
};

export default ReschedulePostMenuItem;