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";

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

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

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

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

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

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

    const { command, data } = event.data;

    if (command === "initData") {
      if (!bConfigured) return;
      iframeRef.current.contentWindow.postMessage(
        {
          command: "initData",
          value: instructSet.data || [],
        },
        IFRAMEURL
      );
      return;
    }

    let newValue = data;
    if (props.name === "master" && sName === "sInstruct") {
      newValue = {
        opr: "btnhandle",
        bConfigured: true,
        data: newValue,
      };
    } else if (sName === "sOnChangeInstruct") {
      newValue = {
        opr: "onchange",
        bConfigured: true,
        data: newValue,
      };
    }
    
    props.onSaveData(JSON.stringify(newValue))
    // setMode("edit");
    // setValue(JSON.stringify(newValue));
  };

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

  return (
    <AntDraggableModal
      title={showName}
      visible={instructSetSettingVisible}
      onCancel={onCancelInstructSetSettingModal}
      width="100w"
      height="100vh"
      style={{ top: 0 }}
      footer={null}
    >
      <div className={styles.contents}>
        {mode === "edit" ? (
          <>
            <Input.TextArea rows={10} value={value} onChange={e => setValue(e.target.value)} />
            <Space style={{ marginTop: 6, float: "right" }}>
              <Button type="primary" onClick={() => props.onSaveData(value)}>
                保存
              </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;