import React, { useMemo } from 'react';
import ModalTable, { ModalTableProps } from '../ModalTable/ModalTable';
import { useModel } from './../../use';

interface MaterialProps<RecordType>
  extends ModalTableProps<RecordType> { }

function Material<RecordType extends object = any>(props: MaterialProps<RecordType>) {
  const [materialColumns] = useModel('/bk/api/material/Material/getModel', ['modalMaterialTable']);

  const table = useMemo(() => {
    const columns = props.table.columns || materialColumns;

    return {
      ...props.table,
      columns,
      width: columns.reduce((next, cur) => {
        next += (cur.width as number) || 150;
        return next
      }, 0)
    }
  }, [props, materialColumns]);

  return (
    <ModalTable <RecordType> {...props} {...table} />
  )
}

export default Material;