import { type FC } from 'react';

import { IconFileUpload, IconX } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';
import { type FileAsset } from '@material-hu/types/attachments';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuLink from '@material-hu/components/design-system/Link';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { type AttachmentType } from './utils';

type Props = {
  file: FileAsset;
  index: number;
  onDelete?: (index: number, type: AttachmentType) => void;
  showDelete?: boolean;
  onClick?: () => void;
  width?: string;
  backgroundColor?: string;
};

const AttachedFileCard: FC<Props> = ({
  file,
  index,
  onDelete,
  showDelete = false,
  onClick = () => {},
  width,
  backgroundColor,
}) => {
  const { t } = useLokaliseTranslation('service_management');
  return (
    <Stack
      key={index}
      sx={{
        width: width || '260px',
        maxWidth: '100%',
        p: 1.5,
        borderRadius: 1,
        backgroundColor: backgroundColor || 'transparent',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-start',
        flexDirection: 'row',
        gap: 1,
        border: theme =>
          `1px solid ${theme.palette.new.border.neutral.divider}`,
        '&:hover': {
          border: theme =>
            `1px solid ${theme.palette.new.border.neutral.divider}`,
        },
        position: 'relative',
      }}
      onClick={onClick}
    >
      {showDelete && (
        <IconButton
          onClick={e => {
            e.stopPropagation();
            onDelete?.(index, 'files');
          }}
          variant="secondary"
          sx={{
            position: 'absolute',
            top: '-10px',
            right: '-8px',
            borderRadius: '100%',
            width: '24px',
            height: '24px',
          }}
        >
          <IconX />
        </IconButton>
      )}
      <HuAvatar
        Icon={IconFileUpload}
        color="primary"
      />
      <Stack sx={{ alignItems: 'flex-start', width: 'calc(100% - 48px)' }}>
        <Typography
          variant="globalXS"
          fontWeight="semiBold"
          noWrap
          sx={{ maxWidth: '100%' }}
        >
          {file.name}
        </Typography>
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'flex-start',
            gap: 1,
          }}
        >
          <Typography variant="globalXXS">{file.size} •</Typography>
          <HuLink
            variant="globalXXS"
            onClick={onClick}
          >
            {t('preview')}
          </HuLink>
        </Stack>
      </Stack>
    </Stack>
  );
};

export default AttachedFileCard;
