import Tippy from '@tippyjs/react'
import { JSXElementConstructor, ReactElement } from 'react'

import Box from '../box'
import { useUp, v } from '../core'
import { Link } from '../link'
import { bg, pointerPlacement, pointerSize } from './consts'
import { TooltipProps } from './tooltip.types'
import { TooltipContent } from './tooltipContent'

/**
 * A simple text popup hint.
 *
 * Displayed on mouse enter, and is hidden on mouse leave.
 *
 * */
export const Tooltip = (props: TooltipProps) => {
  const {
    children,
    fontSize = '16px',
    linkText,
    linkProps,
    maxWidth = '400px',
    text = 'Tooltip',
    placement = 'top',
    disabled = false,
    visible = false,
  } = props

  const isDesktop = useUp('md')

  return (
    <Tippy
      content={
        !!text && (
          <TooltipContent disabled={disabled} fontSize={fontSize} maxWidth={maxWidth}>
            {isDesktop && (
              <Box
                bg={disabled ? bg.disabled : bg.regular}
                bottom={pointerPlacement[placement].bottom}
                h={`${pointerSize}px`}
                left={pointerPlacement[placement].left}
                position="absolute"
                right={pointerPlacement[placement].right}
                top={pointerPlacement[placement].top}
                transform={`translate(${pointerPlacement[placement].translate}) rotate(45deg)`}
                w={`${pointerSize}px`}
              />
            )}
            <v.div>
              {text}
              {!!linkText && (
                <>
                  &nbsp;
                  <Link variant="white" {...linkProps}>
                    {linkText}
                  </Link>
                </>
              )}
            </v.div>
          </TooltipContent>
        )
      }
      interactive
      offset={[0, 2]}
      placement={placement}
      popperOptions={{
        modifiers: [
          {
            name: 'flip',
            enabled: false,
          },
        ],
      }}
      visible={visible || undefined}
    >
      {children as ReactElement<any, string | JSXElementConstructor<any>> | undefined}
    </Tippy>
  )
}

Tooltip.displayName = 'Tooltip'

export default Tooltip
