import React, { useRef, memo, useMemo, useContext, useState, useEffect } from 'react';
import '@ant-design/compatible/assets/index.css';
import { Button, Input, Modal, Select, Upload, Tooltip, Badge, Popover } from 'antd';
import {

  DeleteOutlined,
  UndoOutlined,
  RedoOutlined,
  CodeOutlined,
  SketchOutlined,

} from '@ant-design/icons';
import { history } from 'umi';
import styles from './index.less';
import { dooringContext } from '../../../../layouts';
import PageForm from './PageForm';
import VersionList from './VersionList';



interface HeaderComponentProps {
  pointData: any;
  location: any;
  clearData: any;
  undohandler: any;
  redohandler: any;
  importTpl: any;
  __pageConfig: any;
  dispatch: any;
  savePage: any;
  isNewPage: boolean;
  delPage: any;
}

const HeaderComponent = memo((props: HeaderComponentProps) => {
  const {
    isNewPage,
    pointData,
    location,
    clearData,
    undohandler,
    redohandler,
    importTpl,
    __pageConfig,
    dispatch,
    savePage,
    delPage,
  } = props;
  const [showModalIframe, setShowModalIframe] = useState(false);
  const [showFaceModal, setShowFaceModal] = useState(false);
  const [faceUrl, setFaceUrl] = useState('');
  const [btnLoading, setBtnLoading] = useState(true)
  const deleteAll = () => {
    Modal.confirm({
      title: '确认清空画布?',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        clearData();
      },
    });
  };

  useEffect(() => {
    // 定义截图子页面句柄函数
    window.getFaceUrl = (url) => {
      setFaceUrl(url);
      setShowModalIframe(false);
    };
    setTimeout(() => {
      setBtnLoading(false)
    }, 5000)
  }, []);




  const handleReloadPage = () => {
    document.getElementById('previewPage').contentWindow.location.reload();
  };

  const { getImageLoadingNum } = useContext(dooringContext);
  const onSave = (values, flag) => {
    dispatch({
      type: 'editorModal/updateState',
      payload: {
        pageConfig: values,
      },
    });
    if (flag) {
      dispatch({
        type: 'editorModal/updateState',
        payload: {
          __pageConfig: values,
        },
      });
    }
  };
  var url_string = window.location.href;
  var url = new URL(url_string);
  var mode = url.searchParams.get('mode');
  const isMiniApp = mode === 'miniApp';
  return (
    <div className={styles.header}>
      <div className={styles.logoArea}>
        
        <div className={styles.logo}></div>
      </div>
      <div className={styles.controlArea}>
        
        {isNewPage && !isMiniApp && (
          <Button
            type="link"
            style={{ marginRight: '9px' }}
            title="清空"
            onClick={deleteAll}
            disabled={!pointData.length}
          >
            <DeleteOutlined />
          </Button>
        )}
        {isNewPage && !isMiniApp && (
          <Button
            type="link"
            style={{ marginRight: '9px' }}
            title="撤销"
            onClick={undohandler}
            disabled={!pointData.length}
          >
            <UndoOutlined />
          </Button>
        )}
        {isNewPage && !isMiniApp && (
          <Button type="link" style={{ marginRight: '9px' }} title="重做" onClick={redohandler}>
            <RedoOutlined />
          </Button>
        )}
      </div>
      <div className={styles.btnArea}>
        {history.location.query?.mode === 'miniApp' && <VersionList />}
        <Popover
          placement="bottom"
          title={'页面配置'}
          content={<PageForm isNewPage={isNewPage} onSave={onSave} defaultValue={__pageConfig} />}
          trigger="click"
        >
          <Button type="primary" ghost style={{ marginRight: '12px' }} id="Popover_button">
            <CodeOutlined />
            页面配置
          </Button>
        </Popover>

        <Button type="primary" ghost onClick={delPage} style={{ marginRight: '12px' }}>
          <DeleteOutlined />
          删除页面
        </Button>

        <Button type="primary" ghost onClick={savePage} loading={btnLoading} disabled={btnLoading} style={{ marginRight: '12px' }}>
          <SketchOutlined />
          保存页面
        </Button>
      </div>
      <Modal
        title="生成封面中...(长时间未反应请点右侧按钮重试)"
        visible={showModalIframe}
        footer={null}
        width={414}
        closeIcon={<RedoOutlined />}
        destroyOnClose={true}
        onCancel={handleReloadPage}
        maskClosable={false}
      >
        <iframe
          id="previewPage"
          src={`/preview?tid=${props.location.query.tid}&gf=1`}
          style={{ width: '100%', border: 'none', height: '600px' }}
        ></iframe>
      </Modal>
      <Modal
        title="封面图(右键复制图片)"
        visible={showFaceModal}
        footer={null}
        width={414}
        destroyOnClose={true}
        onCancel={() => setShowFaceModal(false)}
      >
        <img src={faceUrl} style={{ width: '100%' }} />
      </Modal>
    </div>
  );
});

export default HeaderComponent;