import React, { useEffect } from "react";
import { EditableProTable } from "@ant-design/pro-table";
import ProField from "@ant-design/pro-field";
import ProCard from "@ant-design/pro-card";
import { Button } from "antd";

const EditTable = ({
  columns,
  value,
  onChange,
  rowKey,
  recordCreatorProps,
  maxLength,
}) => {
  return (
    <EditableProTable
      columns={columns}
      rowKey={rowKey}
      value={value || []}
      onChange={onChange}
      recordCreatorProps={
        recordCreatorProps == "false"
          ? false
          : {
              newRecordType: "dataSource",
              record: () => ({
                [rowKey]: Date.now(),
              }),
            }
      }
      editable={{
        type: "multiple",
        editableKeys: value ? value.map((item) => item[rowKey]) : [],
        actionRender: (row, config, defaultDoms) => {
          return [defaultDoms.delete];
        },
        onValuesChange: (record, recordList) => {
          onChange(recordList);
        },
      }}
      maxLength={maxLength ?? 1000}
    />
  );
};

export default EditTable;