import {
  ActionType,
  ProFormDependency,
  ProFormField,
  ProFormItemProps,
  ProTableProps,
} from '@ant-design/pro-components';
import { UploadMaterial } from '@chageable/components';
import React, { MutableRefObject } from 'react';

interface ProFormUploadMaterialProps extends ProFormItemProps {
  fieldProps: {
    maxCount: number;
    onChange?: (fileList: any[]) => void;
    fileList?: any[];
    request: ProTableProps<any, any>['request'];
    toolBarRender?: ProTableProps<any, any>['toolBarRender'];
    actionRef?: MutableRefObject<ActionType | undefined>;
  };
}

const ProFormUploadMaterial: React.FC<ProFormUploadMaterialProps> = ({
  fieldProps,
  ...rest
}) => {
  return (
    <ProFormDependency name={[rest.name]}>
      {(data, form) => (
        <ProFormField {...rest}>
          <UploadMaterial
            onChange={(fileList) => {
              form.setFieldValue(
                rest.name,
                fileList?.map((file: any) => file.url),
              );
            }}
            fileList={data[rest.name]?.map((url: string, index: number) => {
              return {
                uid: index.toString(),
                name: url,
                // @ts-ignore
                status: 'success',
                thumbUrl: url,
                url: url,
              };
            })}
            {...fieldProps}
          />
        </ProFormField>
      )}
    </ProFormDependency>
  );
};
export default ProFormUploadMaterial;