import React, { FC, ReactNode, 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 = Omit<AntdTooltipProps, 'title'> & {
	closeable?: boolean; primary?: boolean;
	title: ReactNode
}

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

  > 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={<><span style={{ display: 'inline-block' }}>{title}</span> {closeable ?
				<Close><CloseIcon onClick={handleClick} /></Close> : null}</>}
		/>
	)
}
