import React, { useEffect, useState, useRef } from 'react';
import ZdyTable from '@/webPublic/one_stop_public/Table';
import styles from './index.less';
import { fetchTemplateByCode, fetchTableItem } from '@/webPublic/Services';
import { isJSON } from '@/webPublic/zyd_public/utils/utils';

export default function RenderForm({ get = 'web', isCg = 'yes', style, ...rest }) {
  let content = rest?.postData?.unifiedServicePatternModel?.content;
  if(isJSON(content)){
    content = JSON.parse(content);
  }
  const tableRoot = useRef();
  useEffect(() => {
    const timerId = setTimeout(() => {
      const div = tableRoot.current && tableRoot.current.root;
      if (div) {
        div.style.overflow = 'unset';
      }
    }, 0);
    return () => {
      clearTimeout(timerId);
    }
  }, []);
  if(!content){
    return null;
  }
  return (
    <div className={styles.zyd_onestop_style_class} style={style}>
      <ZdyTable ref={tableRoot}
                get={get}
                isCg={isCg}
                {...rest}
                {...content}
      />
    </div>
  );
}

/**
 * 根据表单code渲染表单
 * @param {Object} content 表单内容，传入对象
 * @param {String} templateCode 表单模板
 */
export function RenderFormByContent({ content, templateCode, form, get, isCg }) {
  const [formTemplate, setFormTemplate] = useState();
  useEffect(
    () => {
      fetchTemplateByCode(templateCode).then(res => {
        if (res) {
          setFormTemplate(res);
        }
      });
    },
    [templateCode]
  );

  return formTemplate ? (
    <RenderForm
      get={get}
      isCg={isCg}
      postData={{
        content: JSON.stringify(content),
        unifiedServicePatternModel: formTemplate,
      }}
      form={form}
    />
  ) : null;
}

/**
 *渲染元数据库中的某条数据
 * @param {Object} objId 元数据库id
 * @param {String} dataTypeKey 元数据库表格键
 * @param {String} dataTypeValue 键对应的值
 * @param {Function} onLoad 数据加载的回调函数
 */
export function RenderFormByObjId({
  objId,
  dataTypeKey,
  dataTypeValue,
  onLoad,
  templateCode,
  form,
  get,
  isCg,
}) {
  const [content, setContent] = useState({});
  useEffect(
    () => {
      fetchTableItem({ dataObjId: objId, key: dataTypeKey, value: dataTypeValue }).then(res => {
        setContent(res || {});
        if (onLoad) {
          onLoad(res);
        }
      });
    },
    [objId, dataTypeKey, dataTypeValue]
  );

  return (
    <RenderFormByContent
      get={get}
      isCg={isCg}
      content={content}
      templateCode={templateCode}
      form={form}
    />
  );
}