import useBreakpoint from 'antd/lib/grid/hooks/useBreakpoint'
import React, { useMemo } from 'react'
import ImgCrop from './CustomImgCrop'
import './ImageCrop.scss'

interface IProps {
  children: any
  aspect?: number
  beforeCrop?(file: any, fileList: any): void
}

const ImageCrop = ({ children, aspect = 1, beforeCrop }: IProps) => {
  const screens = useBreakpoint()

  const modalWidth = useMemo(() => {
    return screens['xs'] ? '100%' : 754
  }, [screens])

  return (
    <ImgCrop
      modalWidth={modalWidth}
      aspect={aspect}
      modalTitle="Crop Image"
      modalOk="Done"
      quality={1}
      resizeMaxSize={1024}
      beforeCrop={beforeCrop}
    >
      {children}
    </ImgCrop>
  )
}

export default ImageCrop
