import { useEffect, useState, useRef } from "react";
import AntDraggableModal from "../AntdDraggableModal";
import * as commonUtils from "@/utils/utils";
import styles from "./index.less";
import { Input, Button, Space } from "antd-v4";
import { MinusOutlined, CloseOutlined } from "@ant-design/icons";

const IFRAMEURL = "http://project.xlyprint.cn";
// const IFRAMEURL = "http://localhost:9099";

const InstructSetSetting = (props = {}) => {
  const { instructSetSettingVisible } = props;
  if (!instructSetSettingVisible) return "";

  const { onCancelInstructSetSettingModal, showConfig, dataValue, instructSetSettingId } = props;
  const { showName, sName } = showConfig;

  const instructSet = commonUtils.convertStrToObj(dataValue, {});
  const { bConfigured } = instructSet;

  const [value, setValue] = useState(dataValue);
  const [mode, setMode] = useState("edit");
  const iframeRef = useRef(null);

  const [formatFlag, setFormatFlag] = useState(0);
  useEffect(() => {
    try {
      const newValue = JSON.stringify(JSON.parse(value.replace(/[\r\n]/g, "")), null, 2);
      setValue(newValue);
    } catch (e) {}
  }, [formatFlag]);

  const onReceiveData = event => {
    // 验证来源
    if (event.origin !== IFRAMEURL) {
      return;
    }

    const { command, data } = event.data;

    if (command === "initData") {
      if (!bConfigured && props.name !== "master") return;
      iframeRef.current.contentWindow.postMessage(
        {
          command: "initData",
          value: instructSet.change || instructSet.blur || (instructSet ? [instructSet] : []),
        },
        IFRAMEURL
      );
      return;
    }

    let newValue = data;
    if (props.name === "master" && sName === "sInstruct") {
      newValue = {
        ...(newValue[0] || {}),
        bConfigured: true,
      };
    } else if (sName === "sOnChangeInstruct") {
      newValue = {
        change: newValue,
        bConfigured: true,
      };
    }

    props.onSaveData(JSON.stringify(newValue));
    // setMode("edit");
    // setValue(JSON.stringify(newValue));
  };

  useEffect(() => {
    // 监听来自 iframe 的消息
    window.addEventListener("message", onReceiveData);
    return () => {
      window.removeEventListener("message", onReceiveData);
    };
  }, []);

  const [visible, setVisible] = useState(true);
  useEffect(() => {
    setVisible(true);
  }, [instructSetSettingId]);

  return (
    <AntDraggableModal
      title={showName}
      visible={instructSetSettingVisible && visible}
      onCancel={onCancelInstructSetSettingModal}
      width="100w"
      height="100vh"
      style={{ top: 0 }}
      footer={null}
      closeIcon={
        <Space>
          <MinusOutlined
            onClick={e => {
              e.stopPropagation();
              setVisible(false);
            }}
          />
          <CloseOutlined />
        </Space>
      }
    >
      <div className={styles.contents}>
        {mode === "edit" ? (
          <>
            <Input.TextArea style={{ height: "calc(100% - 40px)", fontSize: 14 }} value={value} onChange={e => setValue(e.target.value)} />
            <Space style={{ marginTop: 6, float: "right" }}>
              <Button
                type="primary"
                onClick={() => {
                  setFormatFlag(pre => pre + 1);
                }}
              >
                格式化
              </Button>
              <Button type="primary" onClick={() => props.onSaveData(JSON.stringify(JSON.parse(value.replace(/[\r\n]/g, ""))))}>
                保存
              </Button>
              <Button type="primary" onClick={() => setMode("config")}>
                切换配置模式
              </Button>
            </Space>
          </>
        ) : (
          <iframe ref={iframeRef} src={`${IFRAMEURL}/InsSet/?parentDomain=${document.location.origin}`} width="100%" height="100%" frameBorder={0} />
        )}
      </div>
    </AntDraggableModal>
  );
};

export default InstructSetSetting;