import {FormattedMessage} from 'react-intl';
import {Message, Portal} from 'semantic-ui-react';

/** Shows an error message in the middle of the screen. */
export function ErrorMessage(props: {message?: string}) {
  return (
    <Message negative className="error" data-testid="error-message">
      <Message.Header>
        <FormattedMessage
          id="error.failed_to_load_file"
          defaultMessage={'Failed to load file'}
        />
      </Message.Header>
      <p>{props.message}</p>
    </Message>
  );
}

export interface ErrorPopupProps {
  message?: string;
  open: boolean;
  onDismiss: () => void;
}

/**
 * Shows a dismissable error message in the bottom left corner of the screen.
 */
export function ErrorPopup(props: ErrorPopupProps) {
  return (
    <Portal open={props.open} onClose={props.onDismiss}>
      <Message
        negative
        className="errorPopup"
        onDismiss={props.onDismiss}
        data-testid="error-popup"
      >
        <Message.Header>
          <FormattedMessage id="error.error" defaultMessage={'Error'} />
        </Message.Header>
        <p>{props.message}</p>
      </Message>
    </Portal>
  );
}
