import React, { FC, useCallback } from 'react'
import { Tooltip as AntdTooltip, TooltipProps as AntdTooltipProps } from 'antd'
import { ReactComponent as CloseIcon } from '../../icons/close.svg'
import styled from 'styled-components'

export type TooltipProps = AntdTooltipProps & { closeable?: boolean; primary?: boolean }

const Close = styled.span`
  line-height: 17px;
  vertical-align: middle;
  cursor: pointer;
  padding-left: 4px;

  > svg {
	width: 14px;
	height: 14px;
	line-height: 17px;
  }
`

export const Tooltip: FC<TooltipProps> = ({ closeable, primary, title, overlayClassName, ...props }) => {
	const handleClick = useCallback(() => {
		document.documentElement.click()
	}, [])
	return (
		<AntdTooltip
			trigger="click"
			overlayClassName={`health-tooltip${primary ? '-highlighted' : ''} ${overlayClassName || ''}`}
			{...props}
			title={<>{title} {closeable ? <Close><CloseIcon onClick={handleClick} /></Close> : null}</>}
		/>
	)
}