import { useCallback } from 'react';
import PropTypes from 'prop-types';
import { IIIFIFrameCommunication } from './IIIFIFrameCommunication';

/**
 * Opens a new window for click
 */
export function AccessTokenSender({ handleAccessTokenMessage, url = undefined }) {
  const onReceiveAccessTokenMessage = useCallback((e) => {
    if (e.data && e.data.messageId && e.data.messageId === url) handleAccessTokenMessage(e.data);
  }, [handleAccessTokenMessage, url]);

  if (!url) return null;

  const src = new URL(url);
  src.searchParams.append('origin', window.origin);
  src.searchParams.append('messageId', url);

  /**
  login, clickthrough/kiosk open @id, wait for close
  external, no-op
  */
  return (
    <IIIFIFrameCommunication
      src={src.toString()}
      title="AccessTokenSender"
      handleReceiveMessage={onReceiveAccessTokenMessage}
    />
  );
}

AccessTokenSender.propTypes = {
  handleAccessTokenMessage: PropTypes.func.isRequired,
  url: PropTypes.string,
};