import "core-js/modules/es.array.iterator.js";
import "core-js/modules/web.dom-collections.iterator.js";
import React, { useContext, useImperativeHandle, useMemo, useRef } from 'react';
import useMergedState from 'rc-util/es/hooks/useMergedState';
import { PlusOutlined } from '@wii/icons';
import Button from '../button';
import { runFunction } from '../utils';
import ProTable from '../wau-table/Table';
import './style';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
const EditableTableActionContext = /*#__PURE__*/React.createContext(undefined);

/** 可编辑表格的按钮 */
function RecordCreator(props) {
  const {
    children,
    record,
    position,
    newRecordType
  } = props;
  const actionRef = useContext(EditableTableActionContext);
  return /*#__PURE__*/React.cloneElement(children, {
    ...children.props,
    onClick: e => {
      var _actionRef$current, _children$props$onCli, _children$props;
      actionRef === null || actionRef === void 0 || (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : _actionRef$current.addEditRecord(record, {
        position,
        newRecordType
      });
      (_children$props$onCli = (_children$props = children.props).onClick) === null || _children$props$onCli === void 0 ? void 0 : _children$props$onCli.call(_children$props, e);
    }
  });
}

/**
 * 可以直接放到 Form 中的可编辑表格
 *
 * @param props
 */
function WauEditableTable(props) {
  var _props$editable;
  const {
    onTableChange,
    maxLength,
    recordCreatorProps,
    ...rest
  } = props;
  const actionRef = useRef();
  useImperativeHandle(rest.actionRef, () => actionRef.current, [actionRef.current]);
  const [value, setValue] = useMergedState(() => props.value || [], {
    value: props.value,
    onChange: props.onChange
  });
  const {
    record,
    position,
    creatorButtonText,
    newRecordType,
    ...restButtonProps
  } = recordCreatorProps || {};
  const isTop = position === 'top';
  const creatorButtonDom = useMemo(() => {
    if (maxLength && maxLength <= (value === null || value === void 0 ? void 0 : value.length)) {
      return false;
    }
    return recordCreatorProps !== false && /*#__PURE__*/_jsx(RecordCreator, {
      record: runFunction(record, value.length) || {},
      position: position,
      newRecordType: newRecordType,
      children: /*#__PURE__*/_jsx(Button, {
        type: "dashed",
        style: {
          display: 'block',
          margin: '10px 0',
          width: '100%'
        },
        icon: /*#__PURE__*/_jsx(PlusOutlined, {}),
        ...restButtonProps,
        children: creatorButtonText || '添加一行数据'
      })
    });
  }, [recordCreatorProps, maxLength, value.length]);
  const buttonRenderProps = useMemo(() => {
    if (!creatorButtonDom) {
      return {};
    }
    if (isTop) {
      return {
        components: {
          header: {
            wrapper: ({
              className,
              children
            }) => {
              var _rest$columns;
              return /*#__PURE__*/_jsxs("thead", {
                className: className,
                children: [children, /*#__PURE__*/_jsx("tr", {
                  children: /*#__PURE__*/_jsx("td", {
                    colSpan: (_rest$columns = rest.columns) === null || _rest$columns === void 0 ? void 0 : _rest$columns.length,
                    children: creatorButtonDom
                  })
                })]
              });
            }
          }
        }
      };
    }
    return {
      tableViewRender: (_, dom) => {
        var _props$tableViewRende, _props$tableViewRende2;
        return /*#__PURE__*/_jsxs(_Fragment, {
          children: [(_props$tableViewRende = (_props$tableViewRende2 = props.tableViewRender) === null || _props$tableViewRende2 === void 0 ? void 0 : _props$tableViewRende2.call(props, _, dom)) !== null && _props$tableViewRende !== void 0 ? _props$tableViewRende : dom, creatorButtonDom]
        });
      }
    };
  }, [isTop, creatorButtonDom]);
  return /*#__PURE__*/_jsx(EditableTableActionContext.Provider, {
    value: actionRef,
    children: /*#__PURE__*/_jsx(ProTable, {
      search: false,
      options: false,
      pagination: false,
      ...rest,
      ...buttonRenderProps,
      tableLayout: "fixed",
      actionRef: actionRef,
      onChange: onTableChange,
      dataSource: value,
      editable: {
        ...props.editable,
        onValuesChange: props !== null && props !== void 0 && props.onValuesChange || (_props$editable = props.editable) !== null && _props$editable !== void 0 && _props$editable.onValuesChange ? (r, dataSource) => {
          var _props$editable2, _props$editable2$onVa, _props$onValuesChange;
          (_props$editable2 = props.editable) === null || _props$editable2 === void 0 || (_props$editable2$onVa = _props$editable2.onValuesChange) === null || _props$editable2$onVa === void 0 ? void 0 : _props$editable2$onVa.call(_props$editable2, r, dataSource);
          (_props$onValuesChange = props.onValuesChange) === null || _props$onValuesChange === void 0 ? void 0 : _props$onValuesChange.call(props, dataSource, r);
        } : undefined
      },
      onDataSourceChange: setValue
    })
  });
}
WauEditableTable.RecordCreator = RecordCreator;
export default WauEditableTable;