import { type FC } from 'react';

import {
  IconCamera,
  IconFile,
  IconMicrophone,
  IconVideo,
} from '@material-hu/icons/tabler';
import { useTheme } from '@material-hu/mui/styles';
import Typography, { type TypographyProps } from '@material-hu/mui/Typography';

import {
  type HighlightedSpan,
  type SendFileItem,
} from 'src/pages/dashboard/Conversations/types';
import {
  formatTotalTimeAudio,
  getText,
  isAudioAttachment,
  isFileAttachment,
  isGifAttachment,
  isImageAttachment,
  isVideoAttachment,
} from 'src/pages/dashboard/Conversations/utils';
import { bytesToSize } from 'src/utils/bytes';
import { useLokaliseTranslation } from 'src/utils/i18n';

import TypographyTagAndLinkSensitive from '../ConversationsThread/ConversationMessage/TypographyTagAndLinkSensitive';

const ICON_SIZE = 16;

const sxTypography = {
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  flex: 1,
  minWidth: 0,
};

type AttachmentDescriptionProps = {
  attachments: SendFileItem[];
  text?: string;
  highlightedSpans?: HighlightedSpan[];
  variant?: TypographyProps['variant'];
  isPinned?: boolean;
  fontWeight?: TypographyProps['fontWeight'];
};

const AttachmentDescription: FC<AttachmentDescriptionProps> = ({
  attachments,
  text,
  highlightedSpans = [],
  variant = 'globalS',
  isPinned = false,
  fontWeight = 'fontWeightRegular',
}) => {
  const { t } = useLokaliseTranslation('chat');
  const { palette } = useTheme();
  const attachment = attachments[0];
  const showText = !!text && attachments.length === 1;

  if (!attachment) return null;

  if (isVideoAttachment(attachment) || isImageAttachment(attachment)) {
    const onlyVideos = attachments.every(att => isVideoAttachment(att));
    return (
      <>
        {onlyVideos ? (
          <IconVideo
            size={ICON_SIZE}
            color={palette.new.text.neutral.default}
          />
        ) : (
          <IconCamera
            size={ICON_SIZE}
            color={palette.new.text.neutral.default}
          />
        )}
        {showText ? (
          <TypographyTagAndLinkSensitive
            variant={variant}
            sx={sxTypography}
            fontWeight={fontWeight}
            disableLink
            highlightedSpans={highlightedSpans}
          >
            {text}
          </TypographyTagAndLinkSensitive>
        ) : (
          <Typography
            variant={variant}
            sx={sxTypography}
            fontWeight={fontWeight}
          >
            {getText({ t, attachments })}
          </Typography>
        )}
      </>
    );
  }

  if (isGifAttachment(attachment)) {
    return (
      <>
        <Typography>👾</Typography>
        <Typography
          variant={variant}
          sx={sxTypography}
          fontWeight={fontWeight}
        >
          {t('files.gif')}
        </Typography>
      </>
    );
  }

  if (isFileAttachment(attachment)) {
    return (
      <>
        <IconFile
          size={ICON_SIZE}
          color={palette.new.text.neutral.default}
        />
        {showText ? (
          <TypographyTagAndLinkSensitive
            variant={variant}
            sx={sxTypography}
            fontWeight={fontWeight}
            disableLink
            highlightedSpans={highlightedSpans}
          >
            {text}
          </TypographyTagAndLinkSensitive>
        ) : (
          <Typography
            variant={variant}
            sx={sxTypography}
            fontWeight={fontWeight}
          >
            {`${attachment.filename} • ${bytesToSize(attachment.size)}`}
          </Typography>
        )}
      </>
    );
  }

  if (isAudioAttachment(attachment)) {
    const duration = formatTotalTimeAudio(attachment.audio_duration_ms ?? 0);
    return (
      <>
        <IconMicrophone
          size={ICON_SIZE}
          color={palette.new.text.neutral.default}
        />
        <Typography
          variant={variant}
          sx={sxTypography}
          fontWeight={fontWeight}
        >
          {isPinned ? `${t('files.audio')} (${duration})` : duration}
        </Typography>
      </>
    );
  }

  return null;
};

export default AttachmentDescription;