import React, { ComponentType, useContext } from 'react';
import { FormattedMessage as Message, MessageDescriptor } from 'react-intl';

import Context, { AuthContext } from './Context';

interface Props {
  isAvailable?: (context: AuthContext) => boolean;
  payload?: Record<string, any>;
  label: MessageDescriptor;
}

const RejectionLink: ComponentType<Props> = ({
  isAvailable,
  payload,
  label,
}) => {
  const context = useContext(Context);

  if (isAvailable && !isAvailable(context)) {
    // TODO: if want to properly support multiple links, we should control
    // the dividers ' | ' rendered from factory too
    return null;
  }

  return (
    <a
      href="#"
      onClick={event => {
        event.preventDefault();

        context.reject(payload);
      }}
    >
      <Message {...label} />
    </a>
  );
};

export default RejectionLink;