import React, { useEffect } from 'react';
import styled from 'styled-components';

import v from '../../styles/Variables';
import Close from '../NavButton/Close';
import trapFocus from '../../utils/TrapFocus';

interface Props {
  /**
   * the color of the mask
   */
  backgroundColor?: string;
  /**
   * any valid jsx
   */
  children: React.ReactNode;
  /**
   * function to happen after the close button is clicked
   */
  closeCb: () => void;
  /**
   * if the drawer is currently open or not
   */
  drawerOpen: boolean;
  /**
   * class applied to the drawer
   */
  theme?: string;
  /**
   * prevents the background page from scrolling
   */
  preventScroll?: boolean;
  /**
   * title of the drawer
   */
  title?: string;
}

interface Style {
  backgroundColor: string;
}

const BottomDrawer = ({ backgroundColor = v.colors.light, children, closeCb, drawerOpen = false, theme, preventScroll = true, title }: Props) => {
  // stop the body from being scrollable
  useEffect(() => {
    const elClassList = window.document.getElementsByTagName('html')[0].classList;

    setTimeout(() => {
      if (window.document && preventScroll === true && drawerOpen === true) {
        if (elClassList.contains('nwc--noscroll')) {
          elClassList.remove('nwc--noscroll');
        } else {
          elClassList.add('nwc--noscroll');
        }
      }
    }, 1500);

    if (drawerOpen === true) {
      const closeBtn = document.querySelector<HTMLElement>('.nwc--drawer .nwc--hamburger');
      closeBtn!.focus();
    }
  }, [drawerOpen, preventScroll]);

  useEffect(() => {
    document.addEventListener('keydown', (e) => {
      //trapFocus(e, id, drawerOpen);

      if (e.key === 'Escape') {
        window.document.getElementsByTagName('html')[0].classList.remove('nwc--noscroll');
        closeCb();
      }
    });
  }, []);

  useEffect(() => {
    document.addEventListener('keydown', (e) => {
      trapFocus(e, 'bottomDrawer', drawerOpen);
    });
  }, [drawerOpen]);

  return (
    <div id="bottomDrawer">
      <DrawerStyles
        data-test="component-drawer"
        className={drawerOpen === true ? `nwc--drawer ${theme}` : `nwc--drawer closed hide ${theme}`}
        backgroundColor={backgroundColor}
        role="dialog"
        aria-modal="true"
        aria-label={title}
      >
        <Close
          callback={() => {
            window.document.getElementsByTagName('html')[0].classList.remove('nwc--noscroll');
            closeCb();
          }}
        />
        <section data-test="component-drawer-wrapper">{children}</section>
        <Mask
          className="nwc--drawer-mask"
          aria-label="Close"
          onClick={() => {
            window.document.getElementsByTagName('html')[0].classList.remove('nwc--noscroll');
            closeCb();
          }}
        />
      </DrawerStyles>
    </div>
  );
};

export default BottomDrawer;

/* styles */
const DrawerStyles = styled.nav<Style>`
  opacity: 1;
  position: fixed;
  width: 98%;
  margin: 0 1%;
  bottom: 0;
  left: 0;
  transition: bottom 0.2s linear;
  z-index: 9999;

  section {
    max-height: 400px;
    overflow: scroll;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    position: relative;
    height: 100%;
    width: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    background: ${({ backgroundColor }) => backgroundColor};
    overflow-y: scroll;
    z-index: 999;
    padding: 8px;
  }

  .nwc--hamburger {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 9999;
  }
`;

const Mask = styled.aside`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: rgba(0, 0, 0, 0.66);
`;