import type { ReactNode } from 'react';
import {
  Tooltip as AriaTooltip,
  TooltipProps as AriaTooltipProps,
  OverlayArrow,
  composeRenderProps,
} from 'react-aria-components';

import { tv } from 'tailwind-variants';
import { OverlayArrowIcon } from '../icons';

const style = tv({
  base: 'group/tooltip px-2 py-1.5 max-w-[200px] drop-shadow-modal rounded text-sm',
  variants: {
    bgColor: {
      white: 'bg-white [&_svg]:fill-white',
      tertiary: 'bg-primary-tertiary [&_svg]:fill-primary-tertiary',
    },
  },
});

export interface TooltipProps extends Omit<AriaTooltipProps, 'children'> {
  bgColor?: 'white' | 'tertiary';
  children: ReactNode;
}

export function Tooltip({ children, ...props }: TooltipProps) {
  const { className, bgColor = 'white', offset = 10, ...restProps } = props;

  return (
    <AriaTooltip
      offset={offset}
      {...restProps}
      className={composeRenderProps(className, (className, renderProps) =>
        style({ ...renderProps, className, bgColor })
      )}
    >
      <OverlayArrow>
        <OverlayArrowIcon className="block group-data-[placement=bottom]/tooltip:rotate-180 group-data-[placement=left]/tooltip:-rotate-90 group-data-[placement=right]/tooltip:rotate-90" />
      </OverlayArrow>
      <span className="block max-h-[200px] overflow-y-auto whitespace-pre-wrap">{children}</span>
    </AriaTooltip>
  );
}