import React, { ReactElement, ReactNode } from 'react';
import Typography from '../Typography/Typography';
import Mask from './Mask';
import Close from './Close';

export interface ModalProps {
  id?: string;
  /**
   * Valid JSX object that you want displayed in the modal
   */
  children: ReactElement | ReactNode | string;
  /**
   * A callback to run when the close button or the modal mask is clicked
   */
  closeCb: () => void;
  /**
   * If the modal should be shown or not
   */
  show: boolean;
  /**
   * Classes to be applied to the wrapper of the modal
   */
  theme?: string;
  /**
   * Classes to be applied to the body of the modal
   */
  themeBody?: string;
  maskTheme?: string;
  /**
   * The title displayed on the modal
   */
  title: ReactElement | ReactNode | string;
  /**
   * Width, in percent, of the modal, mobile will also 94% unless you override with css
   */
  width?: string;
  /**
   * If the close button should be shown or not
   */
  showCloseButton: boolean;
  ariaLabel?: string;

  screenType?: any;
}

const Modal = ({
  id = 'myId',
  children,
  closeCb,
  show = false,
  theme = 'fixed z-9 top-0 left-0 w-screen h-screen overflow-hidden align-center',
  maskTheme,
  themeBody = 'fixed bottom-5 min-h-52 md:bottom-auto md:top-8 left-0 right-0 bg-white z-50 p-5 mx-auto border rounded-md drop-shadow-xl text-_-neutrals-800',
  title,
  ariaLabel = '',
  width = 'w-11/12 md:w-1/2',
  showCloseButton = false,
  screenType = null,
}: ModalProps) => {
  // if it's set to not show, the just stop
  if (show !== true) return <></>;

  return (
    <aside
      data-c={`slmr--Modal-${id}`}
      id={id}
      className={theme}
      role="dialog"
      aria-modal="true"
      aria-label={ariaLabel || title?.toString()}
      tabIndex={0}
    >
      <div id="slmr--Modal-body" className={`${themeBody} ${width}`}>
        <div>
          {showCloseButton === true && (
            <div className="absolute top-3 right-3">
              <Close
                callback={() => {
                  window.document
                    .getElementsByTagName('html')[0]
                    .classList.remove('slmr--noscroll');
                  if (closeCb) closeCb();
                }}
              />
            </div>
          )}

          <div className={screenType && 'pt-9'}>
            <Typography
              as="h2"
              theme="font-medium text-black text-xl"
              title={title}
            />
          </div>
        </div>
        <div className="my-3">{children}</div>
      </div>
      <Mask maskTheme={maskTheme} />
    </aside>
  );
};

export default Modal;