import React, { useCallback, useRef, useState } from 'react'
import { Button, Spin, Upload } from 'antd'
import { CheckOutlined, PlusOutlined } from '@ant-design/icons'
import Cropper from 'react-perspective-cropper'

import './App.css'
import Header from './components/Header'

const { Dragger } = Upload

const App = () => {
  const [cropState, setCropState] = useState()
  const [img, setImg] = useState()
  const cropperRef = useRef()

  const onDragStop = useCallback((s) => setCropState(s), [])
  const onChange = useCallback((s) => setCropState(s), [])

  const doSomething = async () => {
    console.log('CropState', cropState)
    try {
      const res = await cropperRef.current.done({
        preview: true,
        filterCvParams: {
          thMeanCorrection: 13,
          thMode: window.cv.ADAPTIVE_THRESH_GAUSSIAN_C
        }
      })
      console.log('Cropped and filtered image', res)
    } catch (e) {
      console.log('error', e)
    }
  }

  const onImgSelection = async (e) => {
    if (e.fileList && e.fileList.length > 0) {
      // it can also be a http or base64 string for example
      setImg(e.fileList[0].originFileObj)
    }
  }

  const draggerProps = {
    name: 'file',
    multiple: false,
    onChange: onImgSelection
  }

  return (
    <div className='root-container'>
      <Header />
      <div className='content-container'>
        {cropState && (
          <div className='buttons-container'>
            <Button onClick={doSomething} icon={<CheckOutlined />}>
              Done
            </Button>
            <Button
              onClick={() => {
                cropperRef.current.backToCrop()
              }}
            >
              Back
            </Button>
            <Button
              onClick={() => {
                setImg(undefined)
                setCropState()
              }}
            >
              Reset
            </Button>
          </div>
        )}
        <Cropper
          openCvPath='./opencv/opencv.js'
          ref={cropperRef}
          image={img}
          onChange={onChange}
          onDragStop={onDragStop}
          maxWidth={window.innerWidth - 10}
        />
        {cropState?.loading && <Spin />}
        {!img && (
          <Dragger {...draggerProps}>
            <p>
              <PlusOutlined />
            </p>
            <p>Upload</p>
          </Dragger>
        )}
      </div>
    </div>
  )
}

export default App