import React, { Component } from 'react';
import { cropImage } from 'app/utils'

export default class ImageCrop extends Component {
  state = {
    cropURL: null
  }

  componentDidMount() {
    const { url, crop } = this.props
    this.crop(url, crop)
  }

  componentDidUpdate(prevProps) {
    const { url, crop } = this.props
    if (this.props.crop !== prevProps.crop) {
      cropImage(url, crop).then(canvas =>{
        const cropURL = canvas.toDataURL('image/jpeg', 0.8)
        this.setState({ cropURL })
      })
    }
  }

  crop(url, crop) {
    cropImage(url, crop).then(canvas =>{
      const cropURL = canvas.toDataURL('image/jpeg', 0.8)
      this.setState({ cropURL })
    })
  }


  render() {
    const { cropURL } = this.state
    if (!cropURL) {
      return null
    }
    return (
      <img src={cropURL} className='preview' />
    )
  }
}