import _slice from "lodash/fp/slice";
import React, { useState } from 'react';
import classnames from 'classnames';
import { NovaCompositionNavigationArrowDown as ArrowIcon, NovaLinePhoneMobilePhone as MobilePhone, NovaLineMessagesChatChatBubbleCircleQuestionMark as ChatBubbleCircleQuestionMark, NovaLineNetworkNetworkAlert as NetworkAlert, NovaLineObjectsBinoculars as Binoculaire, NovaLineContentEditionContentBook as ContentBook } from '@coorpacademy/nova-icons';
import { propTypes } from './types';
import styles from './style.css';
const ICONS = {
  mobilePhone: MobilePhone,
  chatBubbleCircleQuestionMark: ChatBubbleCircleQuestionMark,
  networkAlert: NetworkAlert,
  binoculaire: Binoculaire,
  contentBook: ContentBook
};
const MenuLinks = ({
  items,
  title,
  showMoreItem,
  numberOfDisplayedItems,
  isDesktopMode,
  withScroll = false
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const itemsToDisplay = isDesktopMode || isOpen ? items : _slice(0, numberOfDisplayedItems, items);
  const handleOnclickShowMore = () => setIsOpen(!isOpen);
  return /*#__PURE__*/React.createElement("nav", {
    className: styles.container
  }, /*#__PURE__*/React.createElement("h2", {
    className: styles.title
  }, title), /*#__PURE__*/React.createElement("ul", {
    className: styles.list,
    "data-name": "menu-links"
  }, itemsToDisplay.map((item, index) => {
    const {
      handleOnclick
    } = item;
    const Icon = item.icon ? ICONS[item.icon] : null;
    const Item = /*#__PURE__*/React.createElement("div", {
      className: styles.flexContainer
    }, /*#__PURE__*/React.createElement("span", {
      className: item.isSelected ? styles.selectedItem : undefined
    }, item.text), Icon ? /*#__PURE__*/React.createElement(ArrowIcon, {
      className: classnames(styles.arrowIcon, item.isSelected ? styles.selectedIcon : null)
    }) : null);
    return /*#__PURE__*/React.createElement("li", {
      onClick: handleOnclick,
      key: `menu-link-item-${index}`,
      className: styles.item
    }, /*#__PURE__*/React.createElement("div", {
      className: classnames(styles.border, item.isSelected ? styles.selectedBorder : null)
    }), /*#__PURE__*/React.createElement("div", {
      className: styles.flexContainer
    }, Icon ? /*#__PURE__*/React.createElement(Icon, {
      className: classnames(styles.icon, item.isSelected ? styles.selectedIcon : null)
    }) : null, /*#__PURE__*/React.createElement("a", {
      className: styles.link,
      href: withScroll ? `#menu-link-item-${index}` : undefined,
      "aria-label": item.ariaLabel
    }, Item)));
  }), !isDesktopMode ? /*#__PURE__*/React.createElement("li", {
    // eslint-disable-next-line react/jsx-no-bind
    onClick: handleOnclickShowMore,
    key: `menu-link-item-show-more`,
    className: classnames(styles.showMoreItem, styles.item)
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.border
  }), /*#__PURE__*/React.createElement("span", null, isOpen ? showMoreItem.showLessText : showMoreItem.showMoreText, /*#__PURE__*/React.createElement(ArrowIcon, {
    className: isOpen ? styles.showLessIcon : styles.showMoreIcon
  }))) : null));
};
MenuLinks.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
export default MenuLinks;
//# sourceMappingURL=index.js.map