import React, { Component } from 'react'

import UploadImage from './lib/uploadImage.component'
import { post } from './util'

const initialState = {
  'image': null,
  'res': null,
  'loading': false,
}

export default class PhashApp extends Component {
  state = { ...initialState }

  upload(blob) {
    if (this.state.image) {
      URL.revokeObjectURL(this.state.image)
    }
    const url = URL.createObjectURL(blob)
    this.setState({ image: url, loading: true })

    const fd = new FormData()
    fd.append('q', blob)
    post('/api/v1/match', fd)
    .then(res => {
      console.log(res)
      this.setState({ res, loading: false })
    })
    .catch(err => {
      console.log(err)
      this.setState({ loading: false })
    })
  }

  render() {
    return (
      <div className='app'>
        <h1>Perceptual Hash Demo</h1>
        {this.renderQuery()}
        {this.renderResults()}
      </div>
    )
  }

  renderQuery() {
    const { image } = this.state
    const style = {}
    if (image) {
      style.backgroundImage = 'url(' + image + ')'
      style.backgroundSize = 'cover'
      style.opacity = 1
    }
    return (
      <div className='query'>
        <UploadImage onUpload={this.upload.bind(this)} />
        {image && <div style={style} />}
      </div>
    )
  }
  renderResults() {
    const { loading, res } = this.state
    if (!res) {
      return (
        <div className='results'>
        </div>
      )
    }
    if (loading) {
      return (
        <div className='results'>
          <i>Loading...</i>
        </div>
      )
    }

    const { success, error, match, closest_match } = res
    if (!success) {
      return (
        <div className='results'>
          <b>Error: {error}</b>
        </div>
      )
    }

    if (!match) {
      return (
        <div className='results'>
          No match, image added to database
        </div>
      )
    }

    const { ext, phash, score, sha256 } = closest_match
    return (
      <div className='results'>
        Closest match: {sha256}{'.'}{ext}<br />
        Score: {score}<br />
        Phash: {phash.toString(16)}
      </div>
    )
  }
}