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

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

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

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

  return (
    <ImgCropUpload
      modalWidth={modalWidth}
      aspect={aspect}
      modalTitle="Crop Image"
      modalOk="Done"
      quality={1}
      resizeMaxSize={1024}
      beforeCrop={beforeCrop}
      handleCompletedCrop={handleCompletedCrop}
      data-testid="profile-photo__upload-modal"
    >
      {children}
    </ImgCropUpload>
  );
};

export default ProfileImgCropUpload;
