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

/**
 * Creates an SUI `<Message>` component managed via form context
 * Should be called with Context containing the `name` field.
 * The `<Message>` will display when `name` equals `expected`.
 * @param {string} displayName - Display name for the returned component.
 * @param {Object} Context - Form context.
 * @param {string} name - State variable controlling the message.
 * @param {any} expected - Value to check for in the state variable.
 * @param {Object} extraProps - Extra props to add to the element.
 * @returns {Object} component
 */
const createMessageComponent = (
  displayName,
  Context,
  name,
  expected,
  extraProps = { }
) => {
  const Component = (props) => (
    <Context.Consumer>
      { (state) => state[name] === expected && (
        <Message { ...props } { ...extraProps } />
      ) }
    </Context.Consumer>
  );

  Component.displayName = displayName;
  Component.propTypes = Message.propTypes;

  return Component;
};

export default createMessageComponent;
