import React, { Component } from 'react'

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

const initialState = {
  image: null,
  url: "",
  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 })
    })
  }

  submit() {
    const { url } = this.state
    if (!url || url.indexOf('http') !== 0) return
    this.setState({ image: url, loading: true })

    const fd = new FormData()
    fd.append('url', url)
    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>Search by Image</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'>
        <label>
          <span>Query image</span>
          <UploadImage onUpload={this.upload.bind(this)} />
        </label>
        <br />
        <label>
          <span>Add a URL</span>
          <input
            type='text'
            value={this.state.url}
            onChange={e => this.setState({ url: e.target.value })}
            onKeyDown={e => e.keyCode === 13 && this.submit()}
            placeholder='https://'
          />
        </label>
        {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, matches } = res
    if (!success) {
      return (
        <div className='results'>
          <b>Error: {error.replace(/_/g, ' ')}</b>
        </div>
      )
    }

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

    return (
      <div className='results'>
        {matches.map(({ phash, score, sha256, url }) => (
          <div className='result'>
            <img src={url} /><br />
            Match: {sha256}<br />
            Score: {score}<br />
            Phash: {phash.toString(16)}
          </div>
        ))}
      </div>
    )
  }
}