import React, { useMemo, useState } from "react";
import classNames from "classnames";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";
import { Modal } from "../modal";
import { Justify } from "../justify";
import { Button } from "../button";
import { useTranslation } from "../i18n";
import { callBoth } from "../util";
import { injectValue } from "../_util/inject-value";

export interface ImagePreviewProps extends StyledProps {
  /**
   *缩略图 URL
   */
  src?: string;

  /**
   * 自定义触发预览内容
   * @since 2.6.16
   */
  children?: (open: () => void) => React.ReactNode;

  /**
   * 预览图片 URL
   */
  previewSrc: string;

  /**
   * 预览弹窗标题
   */
  previewTitle?: string;

  /**
   * 是否启用点击遮罩关闭
   * @default false
   * @since 2.6.19
   */
  maskClosable?: boolean;

  /**
   * 遮罩样式
   * @since 2.5.4
   */
  maskStyle?: React.CSSProperties;

  /**
   * Modal 自定义类名
   * @since 2.7.4
   */
  modalClassName?: string;
}

/**
 * 图片预览
 */
export const ImagePreview = React.forwardRef(function ImagePreview(
  props: ImagePreviewProps,
  ref: React.Ref<HTMLImageElement>
) {
  const t = useTranslation();
  const { classPrefix } = useConfig();
  const {
    previewSrc,
    className,
    previewTitle,
    src,
    children,
    maskClosable,
    maskStyle,
    modalClassName,
    ...restProps
  } = props;
  const [visible, setVisible] = useState(false);

  const child = useMemo(() => {
    if (src) {
      return (
        <img
          ref={ref}
          alt="preview"
          src={src}
          className={classNames(className, `${classPrefix}-img__preview`)}
          title={t.clickToEnlarge}
          {...restProps}
          onClick={callBoth(() => setVisible(true), (restProps as any).onClick)}
        />
      );
    }
    return injectValue(children)(() => {
      setVisible(true);
    });
  }, [children, className, classPrefix, ref, restProps, src, t.clickToEnlarge]);

  const content = (
    <>
      <div className={`${classPrefix}-dialog__header`}>
        <Justify
          left={
            <h3 className={`${classPrefix}-dialog__headertitle`}>
              {previewTitle}
            </h3>
          }
          right={
            <Button
              type="icon"
              icon="close"
              htmlType="button"
              onClick={() => setVisible(false)}
              aria-label={t.closeText}
            />
          }
        />
      </div>
      <Modal.Body>
        <img src={previewSrc} alt="" onClick={e => e.stopPropagation()} />
      </Modal.Body>
    </>
  );

  return (
    <>
      {child}
      <Modal
        disableCloseIcon
        className={classNames(`${classPrefix}-dialog--img`, modalClassName)}
        style={maskStyle}
        visible={visible}
        onClose={() => setVisible(false)}
        onExited={() => setVisible(false)}
      >
        {maskClosable ? (
          <div
            style={{ height: "100%", width: "100%" }}
            onClick={() => setVisible(false)}
          >
            {content}
          </div>
        ) : (
          content
        )}
      </Modal>
    </>
  );
});

ImagePreview.displayName = "ImagePreview";