import React, { useEffect } from 'react';
import trapFocus from '../utils/trapFocus';
import Typography from '../Typography/Typography';

export interface DrawerProps {
  ariaLabel?: string;
  callback: Function;
  children: React.ReactNode;
  id?: string;
  onBottom?: boolean;
  onRight?: boolean;
  openCallback?: Function;
  title?: string;
  showBack?: boolean;
  showClose?: boolean;
  showMask?: boolean;
}

const Drawer = ({
  ariaLabel,
  callback,
  children,
  id = 'myDrawer',
  onBottom = false,
  onRight = false,
  openCallback = () => {},
  title,
  showBack = false,
  showClose = true,
  showMask = true,
}: DrawerProps) => {
  useEffect(() => {
    if (openCallback !== null) openCallback();
    document.addEventListener('keydown', (e) => {
      trapFocus(e, `#${id}--drawer`, true);
    });
  }, [id, openCallback]);

  return (
    <>
      <section
        id={`${id}--drawer`}
        className={`slmr--drawer z-20 fixed bg-white box-shadow-2xl  ${
          onBottom === true
            ? ' bottom-0 right-0 m-h-400'
            : ' top-0 w-50 z-20 w-96 max-w-md  overflow-hidden overflow-y-scroll h-screen'
        }  ${onRight === true ? ' right-0' : ' left-0'}`}
        aria-label={ariaLabel}
        role="dialog"
        aria-modal="true"
      >
        {title && title !== '' && (
          <div className="drawer--heading flex justify-between w-full border-b p-3 text-lg text-left">
            {showBack !== false && (
              <button
                id="drawer--back"
                type="button"
                className="text-2xl w-12 focus:border-2"
                aria-label={title}
                onClick={() => callback()}
              >
                <i className="fa-light fa-angle-left" />
              </button>
            )}

            <Typography as="h4" weight="semi" title={title} />

            {showClose !== false && (
              <button
                id={`${id}--close`}
                type="button"
                className="text-2xl border-black w-12"
                onClick={() => callback()}
                aria-label="Close"
              >
                <i className="fa-light fa-xmark" aria-hidden="true" />
              </button>
            )}
          </div>
        )}

        {children}
        <br />
        <br />
      </section>

      {showMask !== false && (
        <section
          className="drawer-mask fixed bg-_-primary-0 opacity-70 w-full h-screen z-10 left-0 top-0"
          onClick={() => callback()}
        />
      )}
    </>
  );
};

export default Drawer;