import {forwardRef, memo, useCallback} from 'react';
import {EditableProTable} from "@ant-design/pro-components";
import {Input, Radio} from 'antd';
import {RadioOptions} from "../constants.js";
import {styled} from "styled-components";
const { Search } = Input;
const component = forwardRef(({
  rowKey,
  values,
  columns,
  onChange,
  controlled,
  style,
  ...rest
}, ref) => {
  /** Table的默认RowKey */
  const defaultRowKey = rowKey?rowKey:"id"

  /** 将标题替换为筛选输入框*/
  const onSearch = useCallback((value) => {},[])

  const onFilerChange = useCallback((event)=>{},[])

  return (
    <div style={{height: 850,...style}}>
      <EditableTable
        //size='small'
        value={values}
        onChange={onChange}
        controlled={controlled}
        rowKey={defaultRowKey}
        editableFormRef={ref}
        headerTitle={<Search allowClear onSearch={onSearch} style={{width:300}}/>}
        scroll={{x: 960,y:710}}
        recordCreatorProps={false}
        loading={false}
        toolBarRender={() => [<Radio.Group onChange={onFilerChange} defaultValue="all" optionType="button" options={RadioOptions}/>]}
        columns={columns}
        editable={{
          type: 'multiple',
          editableKeys:values.map((item) => item[defaultRowKey]),
        }}
        {...rest}
      />
    </div>
  )
})

export const ModalConfigPanel = memo(component);

const EditableTable = styled(EditableProTable)`
  .ant-pro-card-body{
    padding: 0;
  }
`