import React, { useMemo } from 'react';

import { makeStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
import { Styles, ViewStyle } from '@cleartrip/ct-design-types';
import { css } from '@emotion/css';

const staticStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.color.background.defaultDarkest,
    position: 'absolute',
    zIndex: theme.zIndex.tooltip,
  },
}));

const TooltipContainer: React.FC<{
  children: React.ReactElement;
  visible: boolean;
  width: ViewStyle['width'];
  onMouseLeave: (event: React.MouseEvent<HTMLDivElement>) => void;
  tooltipRef: React.RefObject<HTMLDivElement | null>;
  styleConfig: {
    root: Styles[];
  };
}> = ({ children, visible, width, onMouseLeave, tooltipRef, styleConfig }) => {
  const tooltipClass = useMemo(
    () =>
      css({
        width: width ?? 'auto',
        visibility: visible ? 'visible' : 'hidden',
      }),
    [width, visible],
  );
  const containerClass = useWebMergeStyles(
    [staticStyles.root, tooltipClass, ...styleConfig.root],
    [styleConfig.root, tooltipClass],
  );
  return (
    <div ref={tooltipRef} className={containerClass} onMouseLeave={onMouseLeave}>
      {children}
    </div>
  );
};

TooltipContainer.displayName = 'TooltipContainer';

export default TooltipContainer;