import { type FC } from 'react';

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

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

type Props = {
  images: FileAsset[];
  files: FileAsset[];
  onDelete: (index: number, type: AttachmentType) => void;
  onOpenFile: (file: FileAsset) => void;
};

const CommentAttachmentsList: FC<Props> = ({
  images,
  files,
  onDelete,
  onOpenFile,
}) => {
  return (
    <Stack
      sx={{
        backgroundColor: theme => theme.palette.new.background.layout.tertiary,
        width: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        flexWrap: 'wrap',
        gap: 1,
        px: 2,
        pb: 2,
      }}
    >
      {images.map((image, index) => (
        <Stack
          key={image.id}
          sx={{
            width: '70px',
            height: '70px',
            position: 'relative',
            borderRadius: '8px',
          }}
        >
          <img
            src={image.url}
            alt={`attached-img-${index}`}
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              borderRadius: '8px',
            }}
          />
          <IconButton
            variant="secondary"
            onClick={() => onDelete(index, 'images')}
            sx={{
              position: 'absolute',
              top: '-10px',
              right: '-8px',
              borderRadius: '100%',
              alignItems: 'center',
              justifyContent: 'center',
              width: '22px',
              height: '22px',
              cursor: 'pointer',
            }}
          >
            <IconX />
          </IconButton>
        </Stack>
      ))}
      {files.map((file, index) => (
        <AttachedFileCard
          key={file.id}
          file={file}
          index={index}
          onDelete={() => onDelete(index, 'files')}
          onClick={() => onOpenFile(file)}
          showDelete={true}
        />
      ))}
    </Stack>
  );
};

export default CommentAttachmentsList;
