import { FC } from 'react';

import GetAppIcon from '@material-hu/icons/material/GetApp';
import ListItemIcon from '@material-hu/mui/ListItemIcon';
import ListItemText from '@material-hu/mui/ListItemText';
import MenuItem from '@material-hu/mui/MenuItem';

import { logEvent } from 'src/config/logging';
import { EventName } from 'src/types/amplitude';
import { File } from 'src/types/files';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type DownloadMenuItemProps = {
  file: File;
};

export const DownloadMenuItem: FC<DownloadMenuItemProps> = props => {
  const { file } = props;

  const { source, id, parentId, name } = file;

  const { t } = useLokaliseTranslation('files');

  const addLogAmplitudeEvent = () => {
    logEvent(EventName.FILE_VIEW, {
      fileId: id,
      folderId: parentId,
    });
  };

  return (
    <MenuItem
      onClick={addLogAmplitudeEvent}
      component="a"
      href={source}
      download={name}
      target="_blank"
      rel="noopener noreferrer"
    >
      <ListItemIcon>
        <GetAppIcon />
      </ListItemIcon>
      <ListItemText>{t('DOWNLOAD')}</ListItemText>
    </MenuItem>
  );
};

export default DownloadMenuItem;
