import React, { useState } from 'react';
import FormContent from './FormContent';
import ComponentLibrary from './ComponentLibrary';
import ItemAttribute from './ItemAttribute';
import { uuidv4 } from '@antv/xflow';
import { Button } from 'antd';

function AuditForm(props) {
  const [formList, setFormList] = useState([]);
  const [select, setSelect] = useState(-1);
  const [visible, setVisible] = useState(false);

  const handleAddItem = item => {
    const formItem = generateItem(item);
    setFormList([...formList, formItem]);
    setVisible(false);
  };

  const generateItem = item => {
    return {
      ...item,
      id: `${item.componentName}_${uuidv4()}`,
      icon: null,
    };
  };

  const onChangeAttribute = newItem => {
    let oldValue = formList[select].props;
    formList[select].props = { ...oldValue, ...newItem };
    setFormList([...formList]);
  };

  return (
    <div>
      <Button onClick={() => setVisible(true)}>增加控件</Button>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          width: 800,
          marginTop: 20,
        }}
      >
        <FormContent onSelect={setSelect} onChange={setFormList} list={formList}></FormContent>
        <ItemAttribute item={formList[select]} onChange={onChangeAttribute}></ItemAttribute>
      </div>
      <ComponentLibrary
        onOk={handleAddItem}
        visible={visible}
        onCancel={() => setVisible(false)}
      ></ComponentLibrary>
    </div>
  );
}

export default AuditForm;