import React from 'react';
import { FooterToolbar } from '@ant-design/pro-layout';
import { Button, Space } from 'antd';
import { FormattedMessage } from 'umi';

export type SubmitterProps = {
  fixOnFooter?: boolean;
  showCancel?: boolean;
  onCancel?: () => void;
  submitText?: React.ReactNode | string;
  cancelText?: React.ReactNode | string;
};

const Submitter = (props: SubmitterProps = {}) => {
  return {
    render({ form }: any) {
      const buttons = (
        <Space direction="horizontal">
          <Button type="primary" key="submit" onClick={() => form?.submit?.()}>
            {props.submitText || <FormattedMessage id="presets.submit" defaultMessage="Submit" />}
          </Button>
          {props.showCancel !== false && (
            <Button key="cancel" onClick={() => props.onCancel?.()}>
              {props.cancelText || <FormattedMessage id="presets.cancel" defaultMessage="Cancel" />}
            </Button>
          )}
        </Space>
      );

      if (props.fixOnFooter) {
        return <FooterToolbar extra={buttons} />;
      }
      return buttons;
    },
  };
};

export default Submitter;