/**
 * TEAM: frontend_infra
 * @flow strict
 */
/* eslint-disable react/prefer-stateless-function */

import * as React from "react";
import {css, StyleSheet} from "aphrodite";
import Tooltip from "./Tooltip";
import Text from "./Text";
import Icon from "./Icon";
import type {StandardIconSizes} from "./Icon";
import type {IconNames} from "./tools/icons";
import type {Color} from "./colors";
import type {TooltipTriggerOptions} from "./CustomTooltip";

const ICON_MARGIN = 4;
type Props = {|
  /** The actual text that should be displayed in the tooltip. */
  +text: string,
  /** Where the tooltip is placed relative to the hoverable trigger element. */
  +position: "left" | "right" | "top" | "bottom",
  /** The size of the tooltip trigger icon. */
  +size: StandardIconSizes,
  /** The icon selected as the tooltip trigger. */
  +iconName: IconNames,
  /** The color of the tooltip icon trigger (see latitude/colors for a full list of usable colors) */
  +iconColor?: Color,
  /** maxWidth of the overlay, strings added to support input like 100%, 50%, em, etc. */
  +maxWidth?: number | string,
  /** Alignment can be used to either align the `HelpTooltip` to text baseline or to its `center` */
  +alignment: "baseline" | "center",
  /** Whether to allow css inheritance of the icon color. See the description in `Icon` **/
  +deprecatedAllowColorInheritance: boolean,
  /** Tooltip trigger method - defaults to 'hover'. Please do not use 'click' value for accessibility reasons. (see go/pull/136841 and https://www.w3.org/TR/wai-aria-practices/#tooltip) */
  +trigger?: TooltipTriggerOptions,
|};

/**
 * @short A simple icon-triggered message that provides auxilliary information that might be too verbose to always expose.
 * @brandStatus V2
 * @status Stable
 * @category Data Display
 *
 * Tooltips often provide additional information that doesn't fit in the standard layout. HelpTooltip, a thin wrapper around `Tooltip`, provides easy access to a simple icon-triggered tooltip. Icons are a great way to indicate tooltips while saving crucial space. The icon selected should, in some way, correlate to the information provided (ie. if it is a warnining, attention would be a good choice).
 */
export default class HelpTooltip extends React.PureComponent<Props> {
  static defaultProps: {|
    alignment: Props["alignment"],
    deprecatedAllowColorInheritance: boolean,
    iconName: IconNames,
    maxWidth: number,
    position: Props["position"],
    size: StandardIconSizes,
    trigger: TooltipTriggerOptions,
  |} = {
    position: "right",
    size: "m",
    iconName: "question",
    maxWidth: 150,
    alignment: "baseline",
    deprecatedAllowColorInheritance: true,
    trigger: "hover",
  };

  render(): React.Node {
    const {
      text,
      position,
      size,
      iconName,
      iconColor,
      maxWidth,
      alignment,
      deprecatedAllowColorInheritance,
      trigger,
    } = this.props;

    const tooltip = (
      <Tooltip
        trigger={trigger}
        overlay={
          <div style={{maxWidth}}>
            <Text color="white" whiteSpace="pre-wrap" wordBreak="break-word">
              {text}
            </Text>
          </div>
        }
        placement={position}
        triggerClassName={css(styles.tooltipTrigger)}
      >
        <Icon
          iconName={iconName}
          size={size}
          color={iconColor}
          deprecatedAllowColorInheritance={deprecatedAllowColorInheritance}
          alignment={alignment}
        />
      </Tooltip>
    );

    return tooltip;
  }
}

const styles = StyleSheet.create({
  tooltipTrigger: {
    display: "inline-flex",
    margin: `0 ${ICON_MARGIN}px`,
  },
});