import React from 'react';
import MusicCard from './MusicCard';
import { MediaProps } from '.';
import Video from '@/components//Video';
import { getPlatformType } from '@/utils/getPlatform';
import { jsonProxy, revokeJsonProxy } from '@/utils/constants';
import Image from '@/components/Image';
import Model from '@/components/Media/Model';
import Audio from '@/components/Media/Audio';
import Download from '@/components/Media/Download';

const Binary: React.FC<MediaProps> = ({
  media,
  mediaVisible,
  mediaMimeType,
  autoPlay,
  getMedia,
  isDetail,
  imgCssStyle,
}) => {
  let format;
  let processedMedia = revokeJsonProxy(media);
  if (processedMedia.includes('?')) {
    const base = processedMedia.split('?')[0];
    format = base.slice(base.lastIndexOf('.') + 1);
  } else {
    format = processedMedia.slice(processedMedia.lastIndexOf('.') + 1);
  }
  if (getPlatformType(processedMedia) === 'IPFS') {
    processedMedia = jsonProxy(processedMedia);
  }
  switch (format) {
    case 'jpg':
    case 'png':
    case 'jpeg':
    case 'bmp':
    case 'ico':
    case 'webp':
    case 'svg':
    case 'avif':
      return (
        <Image
          media={processedMedia}
          mediaVisible={mediaVisible}
          isDetail={isDetail}
          imgCssStyle={imgCssStyle}
          mediaMimeType={''}
        />
      );
    case 'gif':
      return (
        <Image
          media={processedMedia}
          mediaVisible={mediaVisible}
          mediaMimeType="image/gif"
          isDetail={isDetail}
          imgCssStyle={imgCssStyle}
        />
      );

    case 'mp4':
    case 'mov':
    case 'ogv':
    case 'Ogg':
    case 'ogg':
    case 'mkv':
    case 'webm':
    case 'f4v':
      return (
        <Video
          media={processedMedia}
          autoPlay={autoPlay}
          getMedia={getMedia}
          mediaVisible={mediaVisible}
          mediaMimeType={''}
          isDetail={false}
        />
      );

    case 'mp3':
    case 'flac':
    case 'wav':
    case 'aac':
    case 'm4r':
    case 'm4a':
      return mediaVisible ? (
        <Audio
          media={processedMedia}
          autoPlay={autoPlay}
          getMedia={getMedia}
          mediaMimeType={''}
          mediaVisible={false}
          isDetail={false}
        />
      ) : (
        <MusicCard />
      );

    case 'glb':
    case 'gltf':
      return (
        <Model
          media={processedMedia}
          mediaVisible={mediaVisible}
          isDetail={isDetail}
        />
      );

    default:
      return (
        <Download
          media={processedMedia}
          mediaVisible={mediaVisible}
          mediaMimeType={mediaMimeType}
          isDetail={false}
        />
      );
  }
};

export default Binary;
