import useBreakpoint from "antd/lib/grid/hooks/useBreakpoint";
import React, { useMemo } from "react";
import ImgCropUpdate from "./ImgCropUpdate";
import "../ImageCrop.scss";

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

const ProfileImgCropUpdate = ({
  src,
  children,
  aspect = 1,
  beforeCrop,
  handleCompletedCropUpdate,
}: IProps) => {
  const screens = useBreakpoint();

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

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

export default ProfileImgCropUpdate;
