'use client'

import React, { type ReactNode, type ReactElement } from 'react'
import * as Tooltip from '@radix-ui/react-tooltip'
import { type IPropsWithChildren } from '@/Types'
import { makeClassName } from '@/utils'

interface IToolTipProps extends IPropsWithChildren {
  content: ReactNode
  delay?: number
  defaultOpen?: boolean
  className?: string
  side?: 'top' | 'right' | 'bottom' | 'left'
  contentDefaultClassName?: string
  contentClassName?: string
  tooltipWrapperClassName?: string
  dark?: boolean
  useSpan?: boolean
}

const RadixTooltip = ({
  children,
  content,
  delay = 0,
  defaultOpen = false,
  className,
  side,
  contentDefaultClassName = 'text-slate-800 bg-white z-40',
  contentClassName,
  dark = false,
  useSpan = false
}: IToolTipProps): ReactElement => {
  return (
    <Tooltip.Provider
      delayDuration={delay !== undefined ? delay : 0}

    >
      <Tooltip.Root
        defaultOpen={defaultOpen !== undefined ? defaultOpen : false}
      >
        {
          useSpan
            ? <Tooltip.Trigger asChild role='tooltip'>
              <span tabIndex={0} className={className}>
                {children}
              </span>
            </Tooltip.Trigger>
            : <Tooltip.Trigger role='tooltip' className={className}>
              {children}
            </Tooltip.Trigger>
        }
        <Tooltip.Portal>
          <Tooltip.Content
            side={side}
            className={`data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade ${makeClassName({
              defaultClassName: contentDefaultClassName,
              className: contentClassName,
              extras: dark ? ['bg-black text-white'] : undefined
            })
              } select-none rounded-sm px-3.75 py-2.5 text-[15px] leading-none shadow-sm will-change-[transform,opacity]`}
            sideOffset={5}
          >
            {content}
            <Tooltip.Arrow className={
              dark ? 'fill-black' : 'fill-white'
            } />
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  )
}

export default RadixTooltip
export type {
  IToolTipProps
}
