import type { IGif } from '@giphy/js-types';

import Stack, { StackProps } from '@material-hu/mui/Stack';

import { Attachment } from 'src/types/attachments';

import AttachmentsFileList from 'src/components/attachment/AttachmentsFileList';
import AttachmentsGif from 'src/components/attachment/AttachmentsGif';
import AttachmentsMediaList from 'src/components/attachment/AttachmentsMediaList';
import MediaCarousel from 'src/components/attachment/MediaCarousel';

export type AttachmentsListProps = StackProps & {
  images?: Attachment[];
  files?: Attachment[];
  videos?: Attachment[];
  audios?: Attachment[];
  gif?: IGif;
  onDelete?: (file: Attachment, index: number) => void;
  onRemoveGif?: () => void;
  disabled?: boolean;
  mediaListType?: 'carousel' | 'list';
  enableOpenFile?: boolean;
  isPost?: boolean;
  parentContainerId?: string;
  isComment?: boolean;
  handleChangePositionMultimedia?: Function;
  onDownload?: (file: Attachment) => void;
};

const AttachmentsList = ({
  images = [],
  files = [],
  videos = [],
  audios = [],
  gif,
  onDelete,
  onRemoveGif,
  disabled = false,
  mediaListType = 'list',
  enableOpenFile = false,
  isPost = false,
  parentContainerId,
  isComment = false,
  handleChangePositionMultimedia,
  onDownload = () => null,
  ...stackProps
}: AttachmentsListProps) => {
  return (
    <Stack {...stackProps}>
      {(images?.length > 0 || videos?.length > 0 || gif) && (
        <Stack sx={{ flexDirection: 'row' }}>
          {!gif && mediaListType === 'list' && (
            <AttachmentsMediaList
              images={images}
              videos={videos}
              onDelete={onDelete}
              disabled={disabled}
              isPost={isPost}
              isComment={isComment}
              handleChangePositionMultimedia={handleChangePositionMultimedia}
            />
          )}
          {!gif && mediaListType === 'carousel' && (
            <MediaCarousel
              mediaList={[...images, ...videos]}
              onDownload={onDownload}
              width={1}
              isPost={isPost}
              parentContainerId={parentContainerId}
            />
          )}
          {gif && (
            <AttachmentsGif
              gifToShow={gif}
              onRemoveGif={onRemoveGif}
              disabled={disabled}
            />
          )}
        </Stack>
      )}
      {audios?.length > 0 && (
        <AttachmentsFileList
          files={audios}
          onDelete={onDelete}
          disabled={disabled}
        />
      )}
      {files?.length > 0 && (
        <AttachmentsFileList
          files={files}
          onDelete={onDelete}
          enableOpenFile={enableOpenFile}
          onDownload={onDownload}
          disabled={disabled}
        />
      )}
    </Stack>
  );
};

export default AttachmentsList;