import React, { useRef, ReactNode } from 'react';
import { Modal } from 'antd';
import classnames from 'classnames';

export interface IProps {
  value: string; // 预览html代码段
  visible: boolean; // 是否可见
  title?: string; // 预览弹框名称
  width?: number; // 预览弹框高度
  renderHeader?: () => ReactNode | ReactNode; // 渲染头部
  renderFooter?: () => ReactNode | ReactNode; // 渲染底部
  onCancel?: () => void; // 预览弹框关闭
  prefixCls?: string;
  className?: string;
  style?: React.CSSProperties;
}

const EditorPreview: React.FC<IProps> = (props) => {
  const {
    value,
    visible,
    title,
    width,
    renderHeader,
    renderFooter,
    onCancel,
    prefixCls,
    className,
    style,
  } = props;
  const previewRef = useRef<HTMLInputElement>(null);
  setTimeout(() => {
    if (previewRef.current) {
      previewRef.current.innerHTML = value;
    }
  }, 0);
  return (
    <Modal
      className={classnames(className, `${prefixCls}-wrapper`)}
      style={style}
      destroyOnClose
      maskClosable={false}
      title={title}
      visible={visible}
      width={width}
      onCancel={onCancel}
      footer={null}
    >
      {typeof renderHeader === 'function' ? renderHeader() : renderHeader}
      <div className="eidtor-content" ref={previewRef} />
      {typeof renderFooter === 'function' ? renderFooter() : renderFooter}
    </Modal>
  );
};

EditorPreview.defaultProps = {
  visible: false,
  title: '图文详情预览',
  value: '',
  width: 375,
  onCancel: () => {},
  className: '',
  style: {},
};

export default EditorPreview;
