import React, { forwardRef, useRef, useState } from "react";
import { Popover, PopoverProps } from "../popover";
import type { AkselColor } from "../types";
import { cl, composeEventHandlers } from "../utils/helpers";
import { useMergeRefs } from "../utils/hooks";
import { useI18n } from "../utils/i18n/i18n.hooks";
import { HelpTextIcon } from "./HelpTextIcon";

export interface HelpTextProps
  extends
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    Pick<PopoverProps, "strategy" | "placement"> {
  children: React.ReactNode;
  /**
   * Adds a title-tooltip with the given text
   * @default "Mer informasjon"
   */
  title?: string;
  /**
   * Classname for wrapper
   */
  wrapperClassName?: string;
  /**
   * Overrides color.
   * @default "info"
   *
   * @see 🏷️ {@link AkselColor}
   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
   * @private
   */
  "data-color"?: AkselColor;
}

/**
 * A component that displays a help text button with a popover.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/helptext)
 * @see 🏷️ {@link HelpTextProps}
 *
 * @example
 * ```jsx
 * <HelpText title="Hvor kommer dette fra?">
 *   Informasjonen er hentet fra X sin statistikk fra 2021
 * </HelpText>
 * ```
 */
export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
  (
    {
      className,
      children,
      placement,
      strategy = "absolute",
      title,
      onClick,
      wrapperClassName,
      "data-color": color = "info",
      ...rest
    },
    ref,
  ) => {
    const buttonRef = useRef<HTMLButtonElement | null>(null);
    const mergedRef = useMergeRefs(buttonRef, ref);
    const [open, setOpen] = useState(false);
    const translate = useI18n("HelpText");

    const titleWithFallback = title || translate("title");

    return (
      <div
        className={cl("aksel-help-text", wrapperClassName)}
        data-color={color}
      >
        <button
          {...rest}
          ref={mergedRef}
          onClick={composeEventHandlers(onClick, () => setOpen((x) => !x))}
          className={cl(className, "aksel-help-text__button")}
          type="button"
          aria-expanded={open}
          aria-label={titleWithFallback}
        >
          <HelpTextIcon />
          <HelpTextIcon filled />
        </button>
        <Popover
          onClose={() => setOpen(false)}
          className="aksel-help-text__popover"
          open={open}
          anchorEl={buttonRef.current}
          placement={placement}
          strategy={strategy}
        >
          <Popover.Content className="aksel-body-short">
            {children}
          </Popover.Content>
        </Popover>
      </div>
    );
  },
);

export default HelpText;