/**
 * Close button for popup dialog boxes
 * It creates an event handler such that pressing Esc will close the binded popup
 *
 * Should only be used in other React components, otherwise it may not be properly
 * unmounted
 */
import * as React from "react";
import * as ReactDOM from "react-dom";

import { removeElement } from "../../../utils/uiHelpers/removeElement";
import { IPopupButtonProps, PopupButton } from "./PopupButton";

export interface IPopupCloseButtonProps extends IPopupButtonProps {
  class?: string;
  popup: HTMLElement | string;
  style?: any;
  text: string;
  onClose: () => void;
}

export class PopupCloseButton extends PopupButton {
  constructor(props: IPopupCloseButtonProps) {
    super(props);

    this.closePopup = this.closePopup.bind(this);
  }

  closePopup(): void {
    if (this.props.onClose) this.props.onClose();
    let popup: HTMLElement | null;
    if (typeof this.props.popup === "string") {
      popup = document.getElementById(this.props.popup);
    } else {
      popup = this.props.popup;
    }

    // TODO Check if this is okay? This is essentially calling to unmount a
    // parent component
    if (popup instanceof HTMLElement) {
      // Removes everything inside the wrapper container
      ReactDOM.unmountComponentAtNode(popup);
      removeElement(popup); // Removes the wrapper container
    }
  }

  render(): React.ReactNode {
    const className = this.props.class ? this.props.class : "std-button";

    return (
      <button className={className} onClick={this.closePopup} style={this.props.style}>
        {this.props.text}
      </button>
    );
  }
}
