import { css } from 'glamor';
import React, { useEffect } from 'react';
import { Text } from './Text';
import { StyleOverwrites } from './component.interfaces';
import { mergeStyles } from '../styles/mergeStyles';
import { observer } from 'mobx-react';
import { Dim, getDim } from '../utils/dom/getDim';
import { makeAutoObservable } from 'mobx';

// Generate a random ID for the tooltip component
const generateId = () => {
  return '_' + Math.random().toString(36).substr(2, 9);
};

export interface TooltipStyleType {
  container?: React.CSSProperties;
  tooltip?: React.CSSProperties;
}

// Create styles for the tooltip
const TooltipStyles: TooltipStyleType = {
  tooltip: {
    position: 'absolute',
    zIndex: 1000,
    padding: '5px',
    background: '#000',
    color: '#fff',
    fontSize: '14px',
    borderRadius: '4px',
    transition: 'opacity 0.3s ease-in-out'
  },
  container: {
    position: 'relative',
    cursor: 'pointer'
  }
};

export interface TooltipProps extends StyleOverwrites<TooltipStyleType> {
  /**
   * The message content of the tooltip
   */
  text: string;
  /**
   * the children of the tooltip
   */
  children: React.ReactNode;
  /**
   * if true it will limit the width of the tooltip to the width of the contents
   * @default false
   */
  noCutOff?: boolean;
}

/**
 * A tooltip component that displays a message when the user hovers over the children
 *
 * usage:
 *
 * ```sh
 * npm install apphouse
 * ```
 *
 * ```tsx
 * import { Tooltip } from 'apphouse';
 *
 * <Tooltip text="Tooltip text">Hover over me</Tooltip>
 * ```
 */
class TooltipState {
  dim: Dim | undefined;
  constructor() {
    makeAutoObservable(this);
  }
  get values() {
    if (!this.dim) return;
    const { bottom, height, left, right, top, width, x, y } = this.dim;
    return { bottom, height, left, right, top, width, x, y };
  }
  setDim = (dim: Dim) => {
    this.dim = dim;
  };
}

const tooltipContentState = new TooltipState();

/**
 * The Tooltip component
 *
 * ** This component is still under development **
 *
 * usage:
 *
 * `npm install apphouse`
 *
 * ```tsx
 *
 * `import { Tooltip } from 'apphouse';`
 *
 * `<Tooltip text="Tooltip text">Hover over me</Tooltip>`
 * ```
 *
 */
export const Tooltip: React.FC<TooltipProps> = observer(
  ({ text, children, noCutOff = false, styleOverwrites }) => {
    const [showTooltip, setShowTooltip] = React.useState(false);
    const tooltipId = generateId();
    const tooltipContentRef = React.useRef(null);

    const handleMouseEnter = () => {
      setShowTooltip(true);
    };

    const handleMouseLeave = () => {
      setShowTooltip(false);
    };

    const tooltipContent = tooltipContentRef.current;

    useEffect(() => {
      const dim = getDim(tooltipContentRef.current);

      tooltipContentState.setDim(dim);
    }, [tooltipContent, tooltipContentRef]);

    //   tooltip.style.top = `${position.top}px`;
    //   tooltip.style.left = `${position.left}px`;

    const localStyles = mergeStyles(TooltipStyles, styleOverwrites);
    return (
      <div
        ref={tooltipContentRef}
        {...css(localStyles.container, noCutOff && { display: 'inline-block' })}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        <div
          {...css(localStyles.tooltip, {
            opacity: showTooltip ? 1 : 0
          })}
          id={tooltipId}
        >
          <Text variant="caption">{text}</Text>
        </div>
        {children}

        <span>{JSON.stringify(tooltipContentState.values)}</span>
      </div>
    );
  }
);