function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useEffect, useState } from 'react';
import defaultStyle from './NotificationBadge.module.css';
import { abbreviateNumber } from '../../libraries/AbbreviateNumber';
import NotificationBadgePropTypes, { defaultProps } from './NotificationBadge.propTypes';
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
import notificationBadgeCssJSLogic from './NotificationBadge.cssJSLogic';
export default function NotificationBadgeSkeleton(props) {
  const [displayCountText, changeCountText] = useState('');
  let {
    text,
    children,
    count,
    icon,
    onClick,
    tagAttributes,
    tagGeneralAttributes,
    customStyle,
    customId,
    ariaLabel
  } = props;
  let style = useMergeStyle(defaultStyle, customStyle);
  let ariaLabelValue = ariaLabel || text;
  let className = notificationBadgeCssJSLogic(props, style);
  useEffect(() => {
    let displayCount = props.count && abbreviateNumber(props.count);
    displayCount && changeCountText(displayCount);
  }, []);
  return /*#__PURE__*/React.createElement("span", {
    className: style.container,
    "aria-label": ariaLabelValue,
    "data-id": customId,
    onClick: onClick
  }, /*#__PURE__*/React.createElement("span", _extends({}, tagGeneralAttributes, {
    className: className
  }, tagAttributes), icon && icon, count && displayCountText, text && text, children && children));
}
NotificationBadgeSkeleton.propTypes = NotificationBadgePropTypes;
NotificationBadgeSkeleton.defaultProps = defaultProps;