import { css } from 'glamor';
import { observer } from 'mobx-react';
import React from 'react';
import {
  hint as hintStyle,
  hintSizeOptions,
  hintTop,
  hintLeft,
  hintRight,
  hintBottom
} from '../../../styles/defaults/hint.styles';
import { merge } from '../../../utils/obj/merge';

export type HintPosition = 'top' | 'bottom' | 'left' | 'right';

export interface HintProps {
  /**
   * The hint text
   */
  hint: string;
  /**
   * The children element that will display  the hint
   */
  children: React.ReactNode;
  /**
   * Position of the hint
   * @default 'top'
   */
  position?: HintPosition;
  /**
   * Size of the hint
   *
   * @default 'medium'
   * @example
   * <Hint size="large" />
   * <Hint size="medium" />
   * <Hint size="small" />
   *
   * @see https://apphouse.dev/docs/components/hint
   *
   */
  size?: 'small' | 'medium' | 'large';
}

const getPositionHintStyle = (position: HintPosition) => {
  switch (position) {
    case 'top':
      return hintTop;
    case 'bottom':
      return hintBottom;
    case 'left':
      return hintLeft;
    case 'right':
      return hintRight;
    default:
      return hintTop;
  }
};

/**
 * Hint component
 *
 * A fixed position hint that is displayed on the direction specified by the position prop
 *
 * Usage:
 *
 * ```sh
 * npm install apphouse
 * ```
 * @example
 * ```tsx
 * import { Hint } from 'apphouse';
 *
 * <Hint hint="Hint" position="top">
 *   <Text>Hover over me to see the hint</Text>
 * </Hint>
 * ```
 */
export const Hint: React.FC<HintProps> = observer(
  ({ hint, children, position = 'top', size = 'medium' }) => {
    const positionStyle = getPositionHintStyle(position);
    const localStyles = merge(
      {},
      hintStyle,
      positionStyle,
      hintSizeOptions[size]
    );
    return (
      <div data-id="Hint" {...css(localStyles)} aria-label={hint}>
        {children}
      </div>
    );
  }
);