import type { FC } from 'react';

import Box from '@material-hu/mui/Box';
import Link from '@material-hu/mui/Link';
import ListItem, { ListItemProps } from '@material-hu/mui/ListItem';
import Typography from '@material-hu/mui/Typography';

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

import { logEvent } from 'src/config/logging';
import { EventName } from 'src/types/amplitude';
import { Icon } from 'src/types/icons';
import { getFullLink } from 'src/utils/links';

import WidgetIcon from 'src/components/dashboard/widgets/WidgetIcon';

type NavLinkItemProps = ListItemProps & {
  itemId: number;
  path: string;
  title: string;
  icon?: Icon;
  onClick?: () => void;
};

const NavLinkItem: FC<NavLinkItemProps> = props => {
  const { itemId, path, title, icon, onClick = () => null, ...other } = props;

  const addLogAmplitudeEvent = () => {
    logEvent(EventName.WIDGET_SHORTCUT_VIEW, {
      widgetId: itemId,
      name: title,
    });
    onClick();
  };

  return (
    <ListItem
      disableGutters
      sx={{
        display: 'flex',
        py: 0,
        mb: 0,
      }}
      {...other}
    >
      <Button
        component={Link}
        sx={{
          color: 'text.secondary',
          fontWeight: 'fontWeightMedium',
          justifyContent: 'flex-start',
          textAlign: 'left',
          py: '12px',
          textTransform: 'none',
          width: '100%',
        }}
        variant="text"
        href={getFullLink({ link: path })}
        target="_blank"
        rel="noreferrer"
        onClick={addLogAmplitudeEvent}
      >
        <WidgetIcon icon={icon} />
        <Box sx={{ flexGrow: 1, ml: 1 }}>
          <Typography
            sx={{
              color: 'rgba(0,0,0,0.6)',
              fontFamily: 'Roboto',
              fontWeight: 500,
              fontSize: '12px',
              lineHeight: '24px',
              letterSpacing: '0.4px',
            }}
          >
            {title}
          </Typography>
        </Box>
      </Button>
    </ListItem>
  );
};

export default NavLinkItem;