import useBreakpoint from 'antd/lib/grid/hooks/useBreakpoint'
import React, { useMemo } from 'react'
import ImgReZoom from './CustomImgReZoom'
import './ImageReZoom.scss'

interface IProps {
  children: any
  aspect?: number
  widthModal?: number
  onSetImageWidth?: (value: string) => void
  beforeCrop?(file: any, fileList: any): void
}

const ImageReZoom = ({
  children,
  widthModal,
  onSetImageWidth,
  beforeCrop
}: IProps) => {
  const screens = useBreakpoint()

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

  return (
    <ImgReZoom
      modalWidth={modalWidth}
      modalTitle="Crop Image"
      modalOk="Done"
      resizeMaxSize={1024}
      onSetImageWidth={onSetImageWidth}
      beforeCrop={beforeCrop}
    >
      {children}
    </ImgReZoom>
  )
}

export default ImageReZoom
