import Tippy from '@tippyjs/react';
import clsx from 'clsx';

import 'tippy.js/dist/tippy.css';

import styles from './SliderTooltip.module.css';

export interface Props {
  value: string;
  child: React.ReactElement;
  delay: number;
  zIndex?: number;
}

export function SliderTooltip({ value, child, delay, zIndex = 50 }: Props) {
  return (
    <Tippy
      appendTo="parent"
      zIndex={zIndex} // make the z index lower than the dialog
      className={clsx(styles.tooltipCentered, styles.tooltip)}
      content={messageHTML(value)}
      placement="top"
      showOnCreate
      hideOnClick={false}
      trigger="manual"
      delay={delay}
      arrow
      allowHTML
    >
      {child}
    </Tippy>
  );
}

function messageHTML(value: string) {
  let message = value;
  if (message === '0') {
    message = 'unlimited';
  }

  return <div className={styles.tooltipContainer}>{message}</div>;
}