import React from 'react';
import { useTooltipTrigger } from 'react-aria';
import type { TooltipTriggerProps } from 'react-stately';
import { useTooltipTriggerState } from 'react-stately';
import type { DOMAttributes, FocusableElement } from '@react-types/shared';

import { forwardRef } from '../../utils/forwardRef';

import type { PreviewOverlayProps } from './PreviewOverlay';
import { PREVIEW_OVERLAY_DEFAULT_PROPS, PreviewOverlay } from './PreviewOverlay';

const PREVIEW_BASE_DEFAULT_PROPS = {
  ...PREVIEW_OVERLAY_DEFAULT_PROPS,
  delay: 500,
  closeDelay: 500,
} satisfies Partial<PreviewBaseProps>;

const usePreviewBaseState = useTooltipTriggerState;
const usePreviewBaseBehavior = useTooltipTrigger;

export type PreviewTriggerProps<T extends HTMLElement = HTMLElement> = {
  ref: React.RefObject<T | null>;
} & DOMAttributes<FocusableElement>;

/** @inheritdoc */
export interface PreviewBaseProps<T extends HTMLElement = HTMLElement> extends Pick<
  PreviewOverlayProps,
  'placement' | 'offset' | 'crossOffset'
> {
  /**
   * Render function for the trigger element.
   * This function receives the trigger props and a ref to the trigger element that should be passed to the trigger.
   */
  children: (triggerProps: PreviewTriggerProps<T>) => React.ReactNode;
  /**
   * Content to render inside the preview overlay.
   * This function receives the current state of the tooltip trigger.
   */
  content: PreviewOverlayProps['children'];
  /**
   * Time in milliseconds to wait before showing the preview overlay.
   */
  delay?: TooltipTriggerProps['delay'];
  /**
   * Time in milliseconds to wait before closing the preview overlay.
   */
  closeDelay?: TooltipTriggerProps['closeDelay'];
}

export const PreviewBase = forwardRef(function PreviewBase<T extends HTMLElement = HTMLElement>(
  {
    children,
    content,
    placement = PREVIEW_BASE_DEFAULT_PROPS.placement,
    offset = PREVIEW_BASE_DEFAULT_PROPS.offset,
    crossOffset = PREVIEW_BASE_DEFAULT_PROPS.crossOffset,
    delay = PREVIEW_BASE_DEFAULT_PROPS.delay,
    closeDelay = PREVIEW_BASE_DEFAULT_PROPS.closeDelay,
    ...rest
  }: PreviewBaseProps<T>,
  overlayRef: React.ForwardedRef<HTMLDivElement>
) {
  rest satisfies Record<string, never>;

  const triggerRef = React.useRef<T>(null);

  const state = usePreviewBaseState({ delay, closeDelay });

  const { triggerProps, tooltipProps } = usePreviewBaseBehavior({}, state, triggerRef);

  return (
    <>
      {children({ ref: triggerRef, ...triggerProps })}
      <PreviewOverlay
        ref={overlayRef}
        triggerRef={triggerRef}
        state={state}
        placement={placement}
        offset={offset}
        crossOffset={crossOffset}
        {...tooltipProps}
      >
        {content}
      </PreviewOverlay>
    </>
  );
});