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

import Box, { BoxProps } from '@material-hu/mui/Box';
import Chip from '@material-hu/mui/Chip';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { ticketRoutes } from 'src/pages/dashboard/tickets/routes';

import { useTranslation } from 'src/components/dashboard/chat/i18n';

const COUNT_LIMIT = 99;

type NewTicketsProps = BoxProps & {
  count?: number;
};

const NewTickets: FC<NewTicketsProps> = props => {
  const { count = 0 } = props;

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

  const handleClick = () => {
    navigate(ticketRoutes.tickets());
  };

  return (
    <Box {...props}>
      <Button
        onClick={handleClick}
        color="primary"
        variant="outlined"
        size="small"
      >
        {t('NEW_TICKETS')}
        {count > 0 && (
          <Chip
            color="primary"
            label={count > COUNT_LIMIT ? `+${COUNT_LIMIT}` : count}
            size="small"
            sx={{
              height: 18,
              minWidth: 18,
              ml: 1,
            }}
          />
        )}
      </Button>
    </Box>
  );
};

export default NewTickets;