import {
  FileIcon,
  FileCsvIcon,
  FileDocIcon,
  FileMdIcon,
  FilePdfIcon,
  FilePptIcon,
  FileTextIcon,
  FileXlsIcon,
  FileZipIcon,
  ImageIcon,
  SpeakerHighIcon,
  VideoCameraIcon,
  IconProps,
} from '@phosphor-icons/react'
import React from 'react'

import { getDocumentIconType, getSourceType } from './mimeType'
import type { AttachmentSourceType } from './mimeType'

const MEDIA_TYPE_ICON: Record<AttachmentSourceType, React.ElementType> = {
  video: VideoCameraIcon,
  audio: SpeakerHighIcon,
  image: ImageIcon,
  document: FileIcon,
}

const DOCUMENT_ICON_COMPONENT = {
  pdf: FilePdfIcon,
  doc: FileDocIcon,
  xls: FileXlsIcon,
  csv: FileCsvIcon,
  ppt: FilePptIcon,
  zip: FileZipIcon,
  text: FileTextIcon,
  markdown: FileMdIcon,
  generic: FileIcon,
} as const

function getTypeIcon(mimeType: string): React.ElementType {
  const sourceType = getSourceType(mimeType)
  if (sourceType !== 'document') return MEDIA_TYPE_ICON[sourceType]
  return DOCUMENT_ICON_COMPONENT[getDocumentIconType(mimeType)]
}

/** Use instead of `<TypeIcon />` where TypeIcon = getTypeIcon(mime) to satisfy react-hooks/static-components. */
export function renderTypeIcon(
  mimeType: string,
  props: IconProps
): React.ReactElement {
  return React.createElement(getTypeIcon(mimeType), props)
}