import { h, Component } from 'preact'

const image_types = {
  'jpg': 'image/jpeg',
  'jpeg': 'image/jpeg',
  'png': 'image/png',
  'gif': 'image/gif',
}

const audio_types = {
  'wav': 'audio/wav',
  'mp3': 'audio/mp3',
  'flac': 'audio/flac',
  'aiff': 'audio/aiff',
}

const video_types = {
  'mp4': 'video/mp4',
}

export default function FileViewer({ file }) {
  const {
    error,
    name, path,
    date, size,
    buf,
  } = file
  if (error) {
    return <div className='fileViewer'>{error}</div>
  }
  if (!buf) {
    return <div className='fileViewer'>File empty</div>
  }
  const ext = name.split('.').slice(-1)[0].toLowerCase()
  let tag;
  if (ext in image_types) {
    tag = <img src={getURLFor(buf, image_types[ext])} />
  } else if (ext in audio_types) {
    tag = <audio src={getURLFor(buf, audio_types[ext])} controls autoplay />
  } else if (ext in video_types) {
    tag = <video src={getURLFor(buf, audio_types[ext])} controls autoplay />
  } else {
    tag = <div className='text'>{ab2str(buf)}</div>
  }
  return (
    <div className='fileViewer'>{tag}</div>
  )
}

const getURLFor = (buf, type) => {
  const arrayBufferView = new Uint8Array(buf)
  const blob = new Blob([arrayBufferView], { type })
  const urlCreator = window.URL || window.webkitURL
  return urlCreator.createObjectURL(blob)
}

const ab2str = buf => String.fromCharCode.apply(null, new Uint8Array(buf))