import React, { useState, useContext, useEffect, useMemo } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { NovaCompositionCoorpacademyCheck as CheckIcon, NovaCompositionNavigationMore as MoreIcon } from '@coorpacademy/nova-icons';
import Link from '../../atom/link';
import styles from './style.css';
const ADD_TO_MY_LIST_STATUS = {
  IDLE: 'IDLE',
  SUCCESS: 'SUCCESS'
};
const StatusContext = /*#__PURE__*/React.createContext(ADD_TO_MY_LIST_STATUS.IDLE);
export const AddToMyListStatusProvider = ({
  children
}) => {
  const [status, setStatus] = useState(ADD_TO_MY_LIST_STATUS.IDLE);
  useEffect(() => {
    let timeoutId;
    const DURATION = 3000;
    if (status !== ADD_TO_MY_LIST_STATUS.IDLE) {
      timeoutId = setTimeout(() => setStatus(ADD_TO_MY_LIST_STATUS.IDLE), DURATION);
    }
    return () => clearTimeout(timeoutId);
  }, [status]);
  const statusValue = useMemo(() => [status, setStatus], [status, setStatus]);
  return /*#__PURE__*/React.createElement(StatusContext.Provider, {
    value: statusValue
  }, children);
};
export const AddToMyListFeedback = ({
  addToMyListText,
  removeFromMyListText,
  favorite
}) => {
  const [status] = useContext(StatusContext);
  if (status === ADD_TO_MY_LIST_STATUS.IDLE) return null;
  return /*#__PURE__*/React.createElement("div", {
    className: classnames(styles.feedback),
    "data-testid": "add-to-my-list-feedback",
    "data-name": 'add-to-my-list-feedback'
  }, /*#__PURE__*/React.createElement(CheckIcon, {
    className: styles.checkIcon,
    width: 13,
    height: 13
  }), /*#__PURE__*/React.createElement("p", {
    role: "status"
  }, favorite ? addToMyListText : removeFromMyListText));
};
const AddToMyList = ({
  style,
  addToMyListButton,
  favorite,
  onFavoriteClick
}) => {
  const [, setStatus] = useContext(StatusContext);
  const cb = () => setStatus(ADD_TO_MY_LIST_STATUS.SUCCESS);
  function onClick() {
    onFavoriteClick(cb);
  }
  return /*#__PURE__*/React.createElement("div", {
    className: (styles.container, style)
  }, /*#__PURE__*/React.createElement(Link, {
    "data-testid": "add-to-my-list-button",
    "data-name": 'add-to-my-list-button',
    onClick: onClick,
    className: styles.cta
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.wrapper
  }, favorite ? /*#__PURE__*/React.createElement(CheckIcon, {
    className: styles.shareIcon,
    width: 15,
    height: 15
  }) : /*#__PURE__*/React.createElement(MoreIcon, {
    className: styles.shareIcon,
    width: 12,
    height: 12
  }), /*#__PURE__*/React.createElement("p", null, addToMyListButton))));
};
AddToMyListStatusProvider.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.node
} : {};
AddToMyListFeedback.propTypes = process.env.NODE_ENV !== "production" ? {
  addToMyListText: PropTypes.string,
  removeFromMyListText: PropTypes.string,
  favorite: PropTypes.bool
} : {};
AddToMyList.propTypes = process.env.NODE_ENV !== "production" ? {
  style: PropTypes.string,
  addToMyListButton: PropTypes.string,
  favorite: PropTypes.bool,
  onFavoriteClick: PropTypes.func
} : {};
export default AddToMyList;
//# sourceMappingURL=index.js.map