import React from 'react';
import getCompliedCustomId from '../../utils/getCompliedCustomId';
import { skeletonPropTypes, skeletonDefaultProps } from './Tooltip.propTypes';
import defaultStyle from './Tooltip.module.css';
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
import TooltipCssJSLogic from './Tooltip.cssJSLogic';
/*title attribute data should be security applied data*/

export default function TooltipSkeleton(props) {
  let {
    title,
    floatingReference,
    x,
    y,
    position,
    arrow,
    arrowX,
    arrowY,
    arrowReference,
    arrowPlacement,
    isHtmlTitle,
    customStyle
  } = props;
  /* automation props start*/

  let {
    customId,
    customIdPrefix,
    customIdSuffix
  } = props;
  let automationProps = {
    customId,
    customIdPrefix,
    customIdSuffix
  };
  /* automation props end */

  let style = useMergeStyle(defaultStyle, customStyle);
  let {
    tooltipClassName,
    tooltipMessageClassName
  } = TooltipCssJSLogic(props, style);
  return /*#__PURE__*/React.createElement("div", {
    role: "tooltip",
    className: tooltipClassName,
    ref: floatingReference,
    style: {
      position: position,
      top: y || '',
      left: x || ''
    },
    "data-id": getCompliedCustomId(automationProps, customId.tooltip)
  }, arrow && /*#__PURE__*/React.createElement("span", {
    className: style.arrow,
    ref: arrowReference,
    style: {
      top: arrowY || '',
      left: arrowX || '',
      [arrowPlacement]: '-4px'
      /* need to hanlde css variable - half size of arrow will be given here*/

    }
  }), isHtmlTitle ? /*#__PURE__*/React.createElement("div", {
    className: tooltipMessageClassName,
    dangerouslySetInnerHTML: {
      __html: title
    }
  }) : /*#__PURE__*/React.createElement("div", {
    className: tooltipMessageClassName
  }, title));
}
TooltipSkeleton.propTypes = skeletonPropTypes;
TooltipSkeleton.defaultProps = skeletonDefaultProps;