import ReactTooltip from 'react-tooltip';
import clsx from 'clsx';
import _ from 'lodash';
import ReactDOMServer from 'react-dom/server';

import { FeatureId } from '@/react/portainer/feature-flags/enums';

import { getFeatureDetails } from '@@/BEFeatureIndicator/utils';

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

type Position = 'top' | 'right' | 'bottom' | 'left';

export interface Props {
  position?: Position;
  message: string;
  className?: string;
  children: React.ReactNode;
  heading?: string;
  BEFeatureID?: FeatureId;
}

export function TooltipWithChildren({
  message,
  position = 'bottom',
  className,
  children,
  heading,
  BEFeatureID,
}: Props) {
  const id = _.uniqueId('tooltip-');

  const { url, limitedToBE } = BEFeatureID
    ? getFeatureDetails(BEFeatureID)
    : { url: '', limitedToBE: false };

  const messageHTML = (
    <div className={styles.tooltipContainer}>
      <div
        className={clsx(
          'w-full mb-2 inline-flex justify-between',
          styles.tooltipHeading
        )}
      >
        {heading && <span>{heading}</span>}
        {BEFeatureID && limitedToBE && (
          <a
            href={url}
            target="_blank"
            rel="noreferrer"
            className={styles.tooltipBeteaser}
          >
            Business Edition Only
          </a>
        )}
      </div>
      <div>{message}</div>
    </div>
  );

  return (
    <span
      data-html
      data-multiline
      data-tip={ReactDOMServer.renderToString(messageHTML)}
      data-for={id}
      className={clsx(styles.icon, 'inline-flex text-base')}
    >
      {children}
      <ReactTooltip
        id={id}
        multiline
        type="info"
        place={position}
        effect="solid"
        className={clsx(styles.tooltip, className)}
        arrowColor="var(--bg-tooltip-color)"
        delayHide={400}
        clickable
      />
    </span>
  );
}