import React, { memo, useCallback } from 'react';
import { Button } from 'zarm';
import BaseForm from './BaseForm';
import styles from './index.less';
import { IFormConfig } from './schema';
import logo from 'editorAssets/03-表单.png';
const FormComponent = (props: IFormConfig & { isTpl: boolean }) => {
  const {
    title,
    bgColor,
    fontSize,
    titColor,
    btnColor,
    titWeight,
    btnTextColor,
    api,
    formControls,
  } = props;
  const formData: Record<string, any> = {};
  const handleChange = useCallback(
    (item, v) => {
      formData[item.label] = v;
    },
    [formData],
  );
  const handleSubmit = () => {
    // console.log(formData, '####')
    
    if (api) {
      fetch(api, {
        body: JSON.stringify(formData),
        cache: 'no-cache',
        headers: {
          'content-type': 'application/json',
        },
        method: 'POST',
        mode: 'cors',
      });
    }
  };

  const isEditorPage = window.location.pathname.indexOf('editor') > -1;
  return (
    <>
      {props.isTpl && (
        <div>
          <img src={logo} alt="" />
        </div>
      )}
      {!props.isTpl && (
        <div
          className={styles.formWrap}
          id="__formWrap__"
          style={{
            backgroundColor: bgColor,
            overflow: 'hidden',
            position: 'absolute',
            pointerEvents: isEditorPage ? 'none' : 'initial',
            width: '100%'
          }}
        >
          {/* {title && (
            <div
              className={styles.title}
              style={{ fontSize, fontWeight: +titWeight, color: titColor }}
            >
              {title}
            </div>
          )} */}
          <div className="sepcForm">
            <form action="/" method="POST">
              {formControls.map(item => {
                const FormItem = BaseForm[item.type];
                return (
                  item?.disabled ? <></> : <FormItem onChange={(v: string) => handleChange(item, v)} {...item} key={item.id} />
                );
              })}
              <div style={{ textAlign: 'center', padding: '16px 0' }}>
                <input type="hidden" id="txt_source_site_key" name="sourceSiteKey" data-site-key={localStorage.getItem(`SITE-INFO${SITE_VERSION}`)} />
                <Button
                  theme="primary"
                  size="sm"
                  block
                  onClick={handleSubmit}
                  name="btnSubmit"
                  style={{ backgroundColor: btnColor, borderColor: btnColor, color: btnTextColor }}
                >
                  提交
              </Button>
              </div>
            </form>
          </div>
          {/* <div className="sepcForm" style={{ display: 'none' }}>
            <form action="/" method="POST">
              {formControls.map(item => {
                return <div className="name group_name">
                  <label>姓名</label>
                  <input type="text" className="theme-border" id="txt_name" name="name" />
                </div>
              })}
              <input type="hidden" id="txt_source_site_key" name="sourceSiteKey" data-site-key={localStorage.getItem(`SITE-INFO${SITE_VERSION}`)} />
              <button type="button" name="btnSubmit" className="theme-submit theme-border">提交</button>
            </form>
          </div> */}

        </div>
      )}
    </>
  );
};

export default memo(FormComponent);