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

const staticStyles = makeStyles((theme) => ({
  root: {
    zIndex: theme.zIndex.tooltip,
    position: 'absolute',
    display: 'flex',
  },
}));

const webStaticStyles = css({
  width: 'fit-content',
});

const TooltipArrow: React.FC<{
  children: React.ReactElement;
  visible: boolean;
  styleConfig: {
    root: Styles[];
  };
}> = ({ children, visible, styleConfig }) => {
  const tooltipArrowClass = useMemo(
    () =>
      css({
        visibility: visible ? 'visible' : 'hidden',
      }),
    [visible],
  );
  const arrowClass = useWebMergeStyles(
    [staticStyles.root, webStaticStyles, tooltipArrowClass, ...styleConfig.root],
    [tooltipArrowClass, styleConfig.root],
  );
  return <div className={arrowClass}>{children}</div>;
};

export default TooltipArrow;