import { h, Component } from 'preact'
import { connect } from 'react-redux'

import actions from '../actions'

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',
}

class FileViewer extends Component {
  state = {
    loading: true,
    buffer: {}
  }

  fetch() {
    const { file } = this.props
    const fn = [file.path, file.name].join('/').replace('//','/')
    console.log('fetch file', fn)
    const { tool: module } = this.props.app
    this.setState({ buffer: null, loading: true })
    actions.socket.read_file({ module, fn }).then(buffer => {
      console.log(buffer)
      this.setState({ buffer, loading: false })
    })
  }

  componentDidMount(){
    this.fetch()
  }

  componentDidUpdate(nextProps){
    if (this.props.file !== nextProps.file) {
      this.fetch()
    }
  }

  render() {
    const { loading, buffer } = this.state
    if (loading) {
      return <div className='fileViewer'>Loading...</div>
    }
    const {
      error,
      name, path,
      date, size,
      buf,
    } = buffer
    if (error) {
      return <div className='fileViewer'>{error}</div>
    }
    if (!name) {
      return <div className='fileViewer'></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))

const mapStateToProps = state => ({
  app: state.system.app,
})

export default connect(mapStateToProps)(FileViewer)