import * as React from 'react';
import { useRef } from 'react';

import {
  Tooltip as CoreTooltip,
  type TooltipContentProps,
  type TooltipProps as CoreTooltipProps,
  useTooltipState,
} from '@shoptet/ui-core-web';
import { usePresence } from '@shoptet/utils';

import { isNativeHtmlStructure } from '../../utils/isNativeHtmlStructure';
import { Text } from '../Typography/Text/Text';

export interface TooltipProps {
  /**
   * The content wrapped by the tooltip.
   */
  children: string | React.ReactElement;
  closeDelay?: CoreTooltipProps['closeDelay'];
  content: React.ReactNode;
  delay?: CoreTooltipProps['delay'];
  placement?: TooltipContentProps['placement'];
}

const TooltipContentWithPresence: React.FC<{
  content: React.ReactNode;
  placement?: TooltipContentProps['placement'];
}> = ({ content, placement, ...rest }) => {
  rest satisfies Record<PropertyKey, never>;

  const { open } = useTooltipState();
  const ref = useRef<HTMLDivElement>(null);
  const { isPresent } = usePresence(open, ref);

  if (!isPresent) {
    return null;
  }

  return (
    <CoreTooltip.Content ref={ref} keepMounted className='tooltip' offset={12} placement={placement}>
      <CoreTooltip.Arrow className='tooltip__arrow'>
        <svg fill='inherit' height='12' viewBox='0 0 12 12' width='12'>
          <path d='M6 8L0 0H12L6 8Z' />
        </svg>
      </CoreTooltip.Arrow>
      {isNativeHtmlStructure(content) ? <Text>{content}</Text> : content}
    </CoreTooltip.Content>
  );
};

export const Tooltip: React.FC<TooltipProps> = ({
  children,
  closeDelay = 300,
  content,
  delay = 500,
  placement,
  ...rest
}) => (
  <CoreTooltip {...rest} closeDelay={closeDelay} delay={delay}>
    <CoreTooltip.Trigger className={typeof children === 'string' ? 'tooltip__trigger' : undefined}>
      {children}
    </CoreTooltip.Trigger>
    <TooltipContentWithPresence content={content} placement={placement} />
  </CoreTooltip>
);