import { makeAutoObservable } from 'mobx';

export interface PopupType {
  /**
   * Any other data that you might want to pass to the popup
   */
  data: any;
  /**
   * The id of the Popup UI Element
   */
  uiid: string;
  /**
   * The index of the popup in the stack
   */
  index: number;
  /**
   * Whether the popup is active or not
   */
  active: boolean;
  /**
   * The title of the popup
   */
  title?: string;
  /**
   * Unique id of the popup
   */
  id: string;
  /**
   * The popup component to render
   */
  popup?: JSX.Element;
  /**
   * The function to call when the popup is closed
   * @optional
   */
  onClose?: () => void;
}

/**
 * A Popup is a model for the popup component
 * This model allows you to show a popup
 * from anywhere in the app simply calling openPopup() from the
 * app in the store
 */
export class Popup {
  /**
   * Any other data that you might want to pass to the popup
   */
  data: any;
  /**
   * The id of the Popup UI Element
   * it must be unique to the popup
   */
  uiid: string;
  /**
   * The index of the popup in the stack
   */
  index: number;
  /**
   * Whether the popup is active or not
   */
  active: boolean;
  /**
   * The title of the popup
   */
  title?: string;
  /**
   * Unique id of the popup
   */
  id: string;
  /**
   * The popup component to render
   */
  popup?: JSX.Element;
  /**
   * The function to call when the popup is closed
   * @optional
   */
  onClose?: () => void;

  constructor(props: PopupType) {
    const { data, id, index, title, uiid, popup, onClose } = props;
    this.data = data || {};
    this.id = id;
    this.uiid = uiid;
    this.index = index || 0;
    this.active = true;
    this.title = title;
    this.popup = popup;
    this.onClose = onClose;

    makeAutoObservable(this);
  }

  setActive = () => {
    this.active = true;
  };

  setInactive = () => {
    this.active = false;
  };

  setPopup = (popup: JSX.Element) => {
    this.popup = popup;
  };
}