import { IconDownload, IconExternalLink } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Link from '@material-hu/mui/Link';

import HuTooltip from '@material-hu/components/design-system/Tooltip';

import { type Attachment, FileTypes } from 'src/types/attachments';
import { getFileExtension } from 'src/utils/attachments';
import { useLokaliseTranslation } from 'src/utils/i18n';

const { IMAGE, VIDEO, PDF } = FileTypes;

const TaskSupplementarySideContent = ({
  attachment,
}: {
  attachment: Attachment;
}) => {
  const { t } = useLokaliseTranslation('general');

  const isPDF = getFileExtension(attachment.name ?? '').toUpperCase() === PDF;
  const isMediaType = attachment.type === IMAGE || attachment.type === VIDEO;
  const showExternalLinkIcon = isMediaType || isPDF;

  const Icon = showExternalLinkIcon ? IconExternalLink : IconDownload;

  const tooltipTitle = t(
    showExternalLinkIcon ? 'attachment.open' : 'attachment.download',
  );

  return (
    <HuTooltip
      title={tooltipTitle}
      direction="bottom"
    >
      <Link
        href={attachment.url}
        underline="none"
        target="_blank"
        rel="noreferrer"
      >
        <IconButton>
          <Icon />
        </IconButton>
      </Link>
    </HuTooltip>
  );
};

export default TaskSupplementarySideContent;