import React, {memo} from 'react';
import {
  Asset,
  DocumentAsset,
  PictureAsset,
  GifAsset,
  VideoAsset,
  AudioAsset,
  HuDataMember,
} from '@modules/chats/interfaces';
import {
  isAudioAsset,
  isGifAsset,
  isPictureAsset,
  isVideoAsset,
} from '@modules/chats/utils';

import {AttachmentMessageDisplayer} from './components/AttachmentMessageDisplayer';
import {ImageMessageDisplayer} from './components/ImageMessageDisplayer';
import {GifMessageDisplayer} from './components/GifMessageDisplayer';
import {VoiceMessage} from './components/VoiceMessage';

interface Props {
  attachments: Asset[];
  messageId: string;
  itemId: string;
  channel: string;
  senderData: HuDataMember;
  preparePlaylist?: (onReady?: () => void) => void;
}

const MultimediaMessageDisplayerCmp = ({
  itemId,
  attachments,
  messageId,
  channel,
  preparePlaylist,
  senderData,
}: Props) => {
  const firstAttachment = attachments[0];
  const senderId = senderData.id;

  // Only image/videos messages can have multiple attachments
  if (isPictureAsset(firstAttachment) || isVideoAsset(firstAttachment)) {
    return (
      <ImageMessageDisplayer
        attachments={attachments as (PictureAsset | VideoAsset)[]}
        messageId={messageId}
        senderId={senderId}
        channel={channel}
      />
    );
  }

  if (isAudioAsset(firstAttachment)) {
    return (
      <VoiceMessage
        attachment={firstAttachment as AudioAsset}
        preparePlaylist={preparePlaylist}
        messageId={messageId}
        channel={channel}
        senderData={senderData}
      />
    );
  }

  if (isGifAsset(firstAttachment)) {
    return (
      <GifMessageDisplayer
        attachment={firstAttachment as GifAsset}
        itemId={itemId}
      />
    );
  }

  //By design, we will display one attachment at a time
  return (
    <AttachmentMessageDisplayer
      attachment={firstAttachment as DocumentAsset}
      messageId={messageId}
      channel={channel}
    />
  );
};

export const MultimediaMessageDisplayer = memo(MultimediaMessageDisplayerCmp);