import React, { useEffect, useState } from 'react';
import { EasySelect } from '@easyv/react-gui';
import styles from './Fields.less';
const MapTable = (props: { fields: any; data: any; changeData: ({ fields: any }) => any }) => {
  const { data = [], changeData } = props;
  const [fields, setFields] = useState<any[]>([]);
  const [allFields, setAllFields] = useState<any[]>([]);

  useEffect(() => {
    setFields(props.fields);
  }, [props.fields]);

  useEffect(() => {
    const tmpArr: string[] = [];
    if (Array.isArray(data)) {
      data.map((item) => {
        if (item !== null && typeof item === 'object') {
          Object.keys(item).map((element) => {
            if (tmpArr.indexOf(element) === -1) {
              tmpArr.push(element);
            }
          });
        }
      });
    }
    const filterAllFields = tmpArr.map((d) => ({ name: d, value: d })).filter((d) => d) || [];
    setAllFields(filterAllFields);
  }, [props.data]);

  const onComplete = (currentField: { name: string; value: string } = { name: '', value: '' }) => {
    const { name, value } = currentField;
    const newFields = fields.map((field) => {
      if (name === field.name) {
        return {
          ...field,
          value: value || ''
        };
      }
      return field;
    });
    setFields(newFields);
    changeData && changeData({ fields: newFields });
  };
  return (
    <div className={styles.container}>
      <table width="100%" cellPadding={0} cellSpacing={0} style={{ tableLayout: 'fixed' }}>
        <thead className={styles.tableHeader}>
          <tr>
            <td width="27%">字段</td>
            <td width="30%">映射</td>
            <td width="28%">说明</td>
            <td width="15%">状态</td>
          </tr>
        </thead>
        <tbody>
          {fields &&
            fields.map((field) => {
              const { name, value, desc } = field;
              return (
                <tr key={name} className={styles.tableItem}>
                  <td>{name}</td>
                  <td>
                    <EasySelect
                      style={{ width: '100%' }}
                      value={value}
                      allowInput={true}
                      options={allFields.filter((item) => item.value && item.name)}
                      onChange={(value) => onComplete({ name, value: value })}
                    />
                  </td>
                  <td>{desc}</td>
                  <td>
                    {allFields.some((d) => d.value === value) ? (
                      <div className={styles.success}>
                        <i className="icon iconfont icon-icon_sucess" />
                      </div>
                    ) : (
                      <div className={styles.error}>
                        <i className="icon iconfont icon-btn_close" />
                      </div>
                    )}
                  </td>
                </tr>
              );
            })}
        </tbody>
      </table>
    </div>
  );
};

export default MapTable;
