import React, { useRef, useState, useEffect } from 'react';

export interface IDrawer {
  children: any;
  className?: string;
  placement?: 'left' | 'right';
  show?: boolean;
  size?: 'lg' | 'sm';
  style?: React.CSSProperties;
  title?: string;
  onHide?(): void;
  [x: string]: any;
}

export const Drawer: React.FC<IDrawer> = (props) => {
  const { children, className, placement, show, size, style, title, onHide, ...otherProps } = props;
  const refDrawer = useRef(null);
  const [visible, setVisible] = useState(show);

  const showDrawer = () => {
    document.body.style.paddingRight = '17px';
    document.body.style.overflow = 'hidden';
  };

  const hideDrawer = () => {
    setTimeout(() => {
      document.body.style.removeProperty('padding-right');
      document.body.style.removeProperty('overflow');
    }, 200);
    onHide && onHide();
  };

  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'Escape') {
      onHide && onHide();
    }
  };

  const classNamesDrawer = (size: string, visible: boolean) => {
    let classList = 'b-drawer';
    if (size) {
      classList += ` ${size}`;
    }
    if (visible) {
      classList += ` is-visible`;
    }
    if (placement) {
      classList += ` is-${placement}`;
    }
    return classList;
  };

  const classNamesOverlay = (visible: boolean, className: string) => {
    let classList = 'b-drawer-overlay';
    if (visible) {
      classList += ` is-visible`;
    }
    if (placement) {
      classList += ` is-${placement}`;
    }
    if (className) {
      classList += ` ${className}`;
    }
    return classList;
  };

  const handleOutsideEventStart = (e: React.MouseEvent | React.TouchEvent) => {
    if (refDrawer.current.contains(e.target)) {
      return;
    } else {
      onHide();
    }
  };

  const handleOutsideEventEnd = (e: React.MouseEvent | React.TouchEvent) => {
    e.stopPropagation();
  };

  useEffect(() => {
    if (show) {
      setVisible(true);
    } else {
      setVisible(false);
    }
  }, [show]);

  useEffect(() => {
    if (visible) {
      document.addEventListener('keydown', handleKeyDown);
      showDrawer();
    } else {
      hideDrawer();
    }
  }, [visible]);

  useEffect(() => {
    return () => document.removeEventListener('keydown', handleKeyDown);
  });

  return (
    <div className="b-drawer-container" tabIndex={-1} role="dialog" aria-labelledby={title || ''} {...otherProps}>
      <div
        className={classNamesDrawer(size, visible)}
        ref={refDrawer}
        onTouchStart={handleOutsideEventStart}
        onTouchEnd={handleOutsideEventEnd}
        onMouseDown={handleOutsideEventStart}
        onMouseUp={handleOutsideEventEnd}
        style={style}>
        <div className="b-drawer-content">
          <div className="b-drawer-header">
            <div className="b-drawer-title">{title}</div>
            <div className="b-drawer-close" onClick={() => onHide()}>
              &times;
            </div>
          </div>
          {children}
        </div>
      </div>
      <div className={classNamesOverlay(visible, className)} onClick={() => onHide()} />
    </div>
  );
};