import React, { useEffect, useState } from "react";
import style from "./NotificationBadge.module.css";
import getCompliedClassName from "../../utils/getCompliedClassName";
import { abbreviateNumber } from "../../libraries/AbbreviateNumber";
import NotificationBadgePropTypes, {
  defaultProps,
  propsDescription
} from "./NotificationBadge.propTypes";
export default function NotificationBadgeSkeleton(props) {
  const [displayCountText, changeCountText] = useState("");
  let {
    text,
    children,
    count,

    size,
    shape,

    active,

    icon,
    onClick,

    tagAttributeProps,

    customClassName,
    customId,
    ariaLabel
  } = props;

  let ariaLabelValue = ariaLabel || text;
  let className = getCompliedClassName(
    customClassName,
    {
      [style.base]: true,

      [style[size]]: !!size,
      [style[shape]]: !!shape,

      [style.active]: !!active
    },

    {
      [customClassName.base]: !!customClassName.base,

      [customClassName[size]]: !!customClassName.size,
      [customClassName[shape]]: !!customClassName.shape,

      [customClassName.active]: !!customClassName.active
    }
  );
  useEffect(() => {
    let displayCount = props.count && abbreviateNumber(props.count);
    displayCount && changeCountText(displayCount);
  }, []);
  return (
    <span
      className={style.container}
      aria-label={ariaLabelValue}
      data-id={customId}
      onClick={onClick}
    >
      <span className={className} {...tagAttributeProps}>
        {icon && icon}
        {count && displayCountText}
        {text && text}
        {children && children}
      </span>
    </span>
  );
}

NotificationBadgeSkeleton.propTypes = NotificationBadgePropTypes;
NotificationBadgeSkeleton.defaultProps = defaultProps;
