import { Modal, Slider } from "antd";
import LocaleReceiver from "antd/lib/locale-provider/LocaleReceiver";
import useBreakpoint from "antd/lib/grid/hooks/useBreakpoint";
// import ImageBlobReduce from "image-blob-reduce";
import Loading from "components/Loading";
import React, {
  forwardRef,
  useCallback,
  useEffect,
  useMemo,
  useState,
} from "react";
import "./CustomImageReZoom.less";
import { Text } from "components/Typography";

const pkg = "antd-img-re-zoom";
const noop = () => {
  console.log("");
};

const ZOOM_STEP = 5;

const ImageReZoom = (props: ImageReZoomProps) => {
  const {
    src,
    minZoom = 50,
    maxZoom = 100,
    modalTitle,
    modalWidth,
    modalOk,
    modalCancel,
    children,
    onSetImageWidth,
    defaultZoom,
  } = props;

  const [zoomVal, setZoomVal] = useState(maxZoom);
  const [loading, setLoading] = useState(false);
  const [isShowModal, setIsShowModal] = useState(false);
  const screens = useBreakpoint();

  /** Controls */
  const isMinZoom = zoomVal - ZOOM_STEP < minZoom;
  const isMaxZoom = zoomVal + ZOOM_STEP > maxZoom;
  const subZoomVal = useCallback(() => {
    if (!isMinZoom) setZoomVal(zoomVal - ZOOM_STEP);
  }, [isMinZoom, zoomVal]);

  const addZoomVal = useCallback(() => {
    if (!isMaxZoom) setZoomVal(zoomVal + ZOOM_STEP);
  }, [isMaxZoom, zoomVal]);

  const modalProps = useMemo(() => {
    const obj: any = {
      width: modalWidth,
      okText: modalOk,
      cancelText: modalCancel,
    };
    Object.keys(obj).forEach((key) => {
      if (!obj[key]) delete obj[key];
    });
    return obj;
  }, [modalCancel, modalOk, modalWidth]);

  const onClose = useCallback(() => {
    setIsShowModal(false);
  }, []);

  const onOk = () => {
    onClose();
    onSetImageWidth?.(`${zoomVal}%`);
  };

  const handleOnClick = () => {
    setIsShowModal(true);
  };
  useEffect(() => {
    if (defaultZoom) {
      const val = parseInt(defaultZoom.replace("%", ""));
      setZoomVal(val);
    }
  }, [defaultZoom]);

  const renderComponent = (titleOfModal: string) => (
    <>
      <div className="overlay-update" onClick={handleOnClick}>
        <Text preset="semibold14"> UPDATE </Text>
        <div className="opacity"></div>
      </div>

      {children}

      {isShowModal ? (
        <Modal
          visible={true}
          wrapClassName={`${pkg}-modal`}
          title={titleOfModal}
          onOk={onOk}
          onCancel={onClose}
          maskClosable={false}
          destroyOnClose
          centered
          {...modalProps}
        >
          <div className={`${pkg}-container`}>
            <div className={`${pkg}-media-container`}>
              <img style={{ width: `${zoomVal}%` }} src={src} />
            </div>
          </div>

          <div className={`${pkg}-control zoom`}>
            <button onClick={subZoomVal} disabled={isMinZoom}>
              －
            </button>
            <Slider
              min={minZoom}
              max={maxZoom}
              step={ZOOM_STEP}
              value={zoomVal}
              onChange={setZoomVal}
              tipFormatter={(value) => `${value}%`}
            />
            <button onClick={addZoomVal} disabled={isMaxZoom}>
              ＋
            </button>
          </div>
        </Modal>
      ) : loading && screens["xs"] ? (
        <Loading />
      ) : (
        <></>
      )}
    </>
  );

  if (modalTitle) return renderComponent(modalTitle);

  return (
    <LocaleReceiver>
      {(locale, localeCode) =>
        renderComponent(localeCode === "zh-cn" ? "编辑图片" : "Edit image")
      }
    </LocaleReceiver>
  );
};

interface ImageReZoomProps {
  shape?: "rect" | "round";
  grid?: boolean;
  rotate?: boolean;
  minZoom?: number;
  maxZoom?: number;
  fillColor?: string;
  resizeMaxSize?: number;
  modalTitle?: string;
  modalWidth?: number | string;
  modalOk?: string;
  modalCancel?: string;
  beforeCrop?: any;
  cropperProps?: any;
  children?: any;
  onSetImageWidth?: (value: string) => void;
  src?: string;
  defaultZoom?: string;
}

export default forwardRef(ImageReZoom);
