import React, { useState, useEffect } from 'react';
import { Popover } from '../Popover';

export interface IMicroTour {
  children: React.ReactNode;
  className?: string;
  expires?: string;
  hide?: 'xs' | 'sm' | 'md' | 'lg';
  localStorageKey: string;
  target: React.RefObject<HTMLElement>;
  placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left';
  onClick?(): void;
  onDismiss?(): void;
  [x: string]: any;
}

export const MicroTour: React.FC<IMicroTour> = (props) => {
  const { placement = 'top', className, children, expires, hide, localStorageKey, target, onClick, onDismiss, ...otherProps } = props;
  const [visible, setVisible] = useState(false);
  let expired = expires && new Date() > new Date(expires);

  const handleClick = () => {
    onClick && onClick();
    localStorage.setItem(localStorageKey, 'hidden');
    setVisible(false);
  };

  const handleDismiss = (e: React.MouseEvent) => {
    e.stopPropagation();
    onDismiss && onDismiss();
    localStorage.setItem(localStorageKey, 'hidden');
    setVisible(false);
  };

  const handleLocalStorageInit = () => {
    const lsValue = localStorage.getItem(localStorageKey);
    if (expired) {
      return;
    }
    if (lsValue) {
      lsValue === 'hidden' ? setVisible(false) : setVisible(true);
    } else {
      localStorage.setItem(localStorageKey, 'visible');
      setVisible(true);
    }
  };

  const addClassNames = () => {
    let classes = 'b-micro-tour';
    if (placement) {
      classes += ` placement-${placement}`;
    }
    if (hide) {
      classes += ` hide-${hide}`;
    }
    if (className) {
      classes += ` ${className}`;
    }
    return classes;
  };

  useEffect(() => {
    handleLocalStorageInit();
  }, []);

  if (expired || !visible) {
    return null;
  } else {
    return (
      <Popover placement={placement} show={true} target={target} className={addClassNames()} onClick={handleClick} {...otherProps}>
        <span>{children}</span>
        <button type="button" className="b-micro-tour-close" onClick={handleDismiss}>
          &times;
        </button>
      </Popover>
    );
  }
};