import { FC } from 'react';

import { useNavigate } from 'react-router-dom';

import { IconEdit } 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 { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

type Props = Omit<MenuItemProps, 'id'> & {
  id: number;
  disabled?: boolean;
  editRoute: string;
};

const PostEdit: FC<Props> = props => {
  const { id, disabled, editRoute, ...menuProps } = props;

  const { t } = useTranslation('post');
  const navigate = useNavigate();

  const handleClick = () => {
    if (!disabled) {
      navigate(editRoute);
    }
  };

  return (
    <HuMenuItem
      {...menuProps}
      onClick={handleClick}
      sx={{ p: 0 }}
      disabled={disabled}
    >
      <HuListItem
        sx={{
          p: 0,
          '& .MuiListItem-root': {
            flexDirection: 'column',
            alignItems: 'flex-start',
            '& > :nth-of-type(2)': {
              pl: '44px',
            },
          },
        }}
        avatar={{ Icon: IconEdit }}
        text={{ title: t('post:edit_post_web') }}
        sideText={disabled ? { copetin: t('post:poll_voted') } : undefined}
      />
    </HuMenuItem>
  );
};

export default PostEdit;