import { FormDefaults } from './FormDefaults';
import { useFormikContext } from 'formik';
import SubmitFormButton from './SubmitFormButton';

export interface FormActionsProps {
  /** Allow the form to be submitted without any changes. By default this is not allowed. */
  allowPristineSubmit?: boolean;
  /** The cancel button's `onClick`.
   * @defaultValue `window.history.back()`
   */
  handleCancel?: () => void;
  /** Whether both buttons should be disabled. */
  disabled?: boolean;
}

/** Standard cancel and submit buttons. */
export default function FormActions({
  allowPristineSubmit,
  handleCancel,
  disabled,
}: FormActionsProps) {
  const { isSubmitting } = useFormikContext();
  return (
    <>
      <SubmitFormButton
        className={FormDefaults.cssClassPrefix + 'form-actions'}
        allowPristineSubmit={allowPristineSubmit}
        disabled={disabled}
      />
      <button
        type="button"
        className={
          FormDefaults.cssClassPrefix +
          'form-actions ' +
          FormDefaults.cssClassPrefix +
          'cancel-form-button'
        }
        disabled={isSubmitting || disabled}
        onClick={handleCancel || goBack}>
        Cancel
      </button>
    </>
  );
  function goBack() {
    window.history.back();
  }
}