text: import DropZone from './DropZone'
  import React from 'react'
  import Spinner from './Spinner'
  import Tempalink from './Tempalink'
  import UploadActions from '../actions/UploadActions'
  import UploadStore from '../stores/UploadStore'
  import socket from 'filepizza-socket'
  import { formatSize } from '../util'
  
  export default class UploadPage extends React.Component {
  
    constructor() {
      super()
      this.state = UploadStore.getState()
    
      this._onChange = () => {
        this.setState(UploadStore.getState())
      }
    }
    
    componentDidMount() {
      UploadStore.listen(this._onChange)
    }
    
    componentDidUnmount() {
      UploadStore.unlisten(this._onChange)
    }
    
    uploadFile(file) {
      UploadActions.uploadFile(file)
    }
    
    handleSelectedFile(event) {
      let files = event.target.files
      if (files.length > 0) {
        UploadActions.uploadFile(files[0])
      }
    }
    
    render() {
      switch (this.state.status) {
        case 'ready':
    
          return <DropZone onDrop={this.uploadFile.bind(this)}>
            <div className="page">
    
              <Spinner dir="up" />
    
              <h1>FilePizza</h1>
              <p>Free peer-to-peer file transfers in your browser.</p>
              <p>We never store anything. Files only served fresh.</p>
              <p>
                <label className="select-file-label">
                  <input type="file" onChange={this.handleSelectedFile} required/>
                  <span>select a file</span>
                </label>
              </p>
            </div>
          </DropZone>
    
        case 'processing':
          return <div className="page">
    
            <Spinner dir="up" animated />
    
            <h1>FilePizza</h1>
            <p>Processing...</p>
    
          </div>
    
        case 'uploading':
          return <div className="page">
    
            <h1>FilePizza</h1>
            <Spinner dir="up" animated
              name={this.state.fileName}
              size={this.state.fileSize} />
    
            <p>Send someone this link to download.</p>
            <p>This link will work as long as this page is open.</p>
            <p>Peers: {this.state.peers} &middot; Up: {formatSize(this.state.speedUp)}</p>
            <Tempalink token={this.state.token} />
    
          </div>
      }
    }
  
  }
  