import _noop from "lodash/fp/noop";
import _isEmpty from "lodash/fp/isEmpty";
import _has from "lodash/fp/has";
import _get from "lodash/fp/get";
import React, { useCallback, useMemo, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { v5 as uuidV5 } from 'uuid';
import { NovaCompositionNavigationMore as MoreIcon, NovaCompositionCoorpacademyCheck as CheckIcon } from '@coorpacademy/nova-icons';
import Provider, { GetSkinFromContext, GetTranslateFromContext } from '../../atom/provider';
import ToolTip, { toggleStateOnKeyPress } from '../../atom/tooltip';
import Button from '../../atom/button';
import style from './favorite.css';
const Favorite = ({
  favorite,
  addFavoriteToolTip,
  removeFavoriteToolTip,
  className,
  'aria-label': ariaLabel = {},
  onFavoriteClick = _noop,
  disabled
}, legacyContext) => {
  const skin = GetSkinFromContext(legacyContext);
  const translate = GetTranslateFromContext(legacyContext);
  const handleFavoriteClick = useCallback(e => {
    e.stopPropagation();
    e.preventDefault();
    if (!disabled) onFavoriteClick(e);
  }, [disabled, onFavoriteClick]);
  const primaryColor = _get('common.primary', skin);
  const darkColor = _get('common.dark', skin);
  const brandColor = _get('common.brand', skin);
  const buttonRef = useRef(null);
  const allowToolTip = useMemo(() => !_isEmpty(removeFavoriteToolTip) && !_isEmpty(addFavoriteToolTip), [addFavoriteToolTip, removeFavoriteToolTip]);

  // to be replaced by useId when React17 is bumped to React18
  const [favoriteButtonAnchorId] = useState(allowToolTip ? uuidV5('engaged-battle-', uuidV5.URL) : undefined);
  const toolTipContent = useMemo(
  // eslint-disable-next-line no-nested-ternary
  () => allowToolTip ? favorite ? removeFavoriteToolTip : addFavoriteToolTip : null, [addFavoriteToolTip, favorite, removeFavoriteToolTip, allowToolTip]);
  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);
  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);
  const handleMouseOver = useCallback(() => {
    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);
    /* istanbul ignore next */
    _has(['current', 'focus'], buttonRef) && buttonRef.current.focus();
    setToolTipIsVisible(true);
  }, [mouseLeaveTimer]);
  const handleMouseLeave = useCallback(() => {
    setMouseLeaveTimer(setTimeout(() => {
      setToolTipIsVisible(false);
      // @ts-expect-error (error: blur does not exists on type never)
      /* istanbul ignore next */
      _has(['current', 'blur'], buttonRef) && buttonRef.current.blur();
    }, 500));
  }, []);
  const handleKeyPress = useCallback(event => {
    toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);
  }, [toolTipIsVisible]);
  const iconWrapperClassName = useMemo(() => classnames(style.favorite, className, favorite && style.selected), [className, favorite]);
  const icon = useMemo(() => favorite ? /*#__PURE__*/React.createElement(CheckIcon
  // eslint-disable-next-line css-modules/no-undef-class
  , {
    className: style.checkIcon,
    style: {
      color: brandColor
    },
    width: 13,
    height: 13,
    "data-testid": "favorite-check-icon",
    "aria-label": ariaLabel.removeFromFavorite
  }) : /*#__PURE__*/React.createElement(MoreIcon, {
    className: style.moreIcon,
    style: {
      color: darkColor
    },
    width: 13,
    height: 13,
    "data-testid": "favorite-add-icon",
    "aria-label": ariaLabel.addToFavorite
  }), [ariaLabel.addToFavorite, ariaLabel.removeFromFavorite, brandColor, darkColor, favorite]);
  return /*#__PURE__*/React.createElement("div", {
    className: style.favoriteWrapper,
    "data-testid": "favorite-wrapper"
  }, /*#__PURE__*/React.createElement(Button, {
    buttonRef: buttonRef,
    type: "button",
    "data-for": favoriteButtonAnchorId,
    "data-tooltip-place": "left",
    "data-tip": allowToolTip,
    "data-name": "favorite",
    "data-testid": "favorite-button",
    "aria-label": ariaLabel.favorite,
    buttonContentClassName: iconWrapperClassName,
    onClick: handleFavoriteClick,
    style: {
      color: primaryColor
    },
    onKeyDown: handleKeyPress,
    onMouseLeave: handleMouseLeave,
    onMouseOver: handleMouseOver,
    tabIndex: 0,
    useButtonTag: true,
    useWrapper: false
  }, icon), /*#__PURE__*/React.createElement(ToolTip, {
    fontSize: 12,
    anchorId: favoriteButtonAnchorId,
    toolTipIsVisible: toolTipIsVisible,
    TooltipContent: toolTipContent,
    closeToolTipInformationTextAriaLabel: translate('close_tooltip_information'),
    stickyOnKeyboardNavigation: true
  }));
};
Favorite.propTypes = process.env.NODE_ENV !== "production" ? {
  className: PropTypes.string,
  favorite: PropTypes.bool,
  disabled: PropTypes.bool,
  addFavoriteToolTip: PropTypes.string,
  removeFavoriteToolTip: PropTypes.string,
  onFavoriteClick: PropTypes.func,
  'aria-label': PropTypes.shape({
    favorite: PropTypes.string,
    addToFavorite: PropTypes.string,
    removeFromFavorite: PropTypes.string
  })
} : {};
Favorite.contextTypes = {
  skin: Provider.childContextTypes.skin,
  translate: Provider.childContextTypes.translate
};
export default Favorite;
//# sourceMappingURL=favorite.js.map