import React from 'react';
import { Button } from 'semantic-ui-react';

/**
 * Creates an SUI `<Button>` component managed via form context
 * Should be called with Context containing an `isFormValid()` function to check
 * whether the form can be submitted.
 * @param {string} displayName - Display name for the returned component.
 * @param {Object} Context - Form context.
 * @returns {Object} component
 */
const createButtonComponent = (displayName, Context) => {
  const Component = (props) => (
    <Context.Consumer>
      { (state) => (
        <Button
          { ...props }
          disabled={ props.disabled || !state.isFormValid() }
          type="submit"
        />
      ) }
    </Context.Consumer>
  );

  Component.displayName = displayName;
  Component.propTypes = { ...Button.propTypes };

  // The type prop has been hardcoded above and cannot be overridden.
  delete Component.propTypes.type;

  return Component;
};

export default createButtonComponent;
