import _uniqueId from "lodash/fp/uniqueId";
import React, { useMemo, useState, useCallback, useRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { NovaCompositionNavigationArrowDown as ArrowDownIcon } from '@coorpacademy/nova-icons';
import ListBadges from '../list-badges';
import ButtonLink from '../../atom/button-link';
import ContentBadge from '../../atom/content-badge';
import style from './style.css';
const buildItemsOfSection = items => {
  return items.map((item, index) => {
    const {
      type
    } = item;
    switch (type) {
      case 'mainElement':
        return /*#__PURE__*/React.createElement("li", {
          key: `${item.title}-${index}`,
          "data-name": item.title
        }, /*#__PURE__*/React.createElement("span", {
          className: style.title
        }, item.title), /*#__PURE__*/React.createElement("span", {
          className: style.value
        }, item.value));
      case 'content':
        {
          const {
            badgeList,
            badgeAriaLabel,
            title,
            author,
            unsaved = false
          } = item;
          return /*#__PURE__*/React.createElement("li", {
            className: style.contentWrapper,
            key: `${title}-${index}`,
            "data-name": item.title
          }, /*#__PURE__*/React.createElement("span", {
            className: style.contentCounter
          }, index + 1), /*#__PURE__*/React.createElement("div", {
            className: style.contentItem
          }, /*#__PURE__*/React.createElement(ListBadges, {
            "aria-label": badgeAriaLabel,
            items: badgeList
          }), /*#__PURE__*/React.createElement("div", {
            className: classnames(style.contentTitle, unsaved && style.unsaved),
            title: title
            // eslint-disable-next-line react/no-danger
            ,
            dangerouslySetInnerHTML: {
              __html: title
            }
          }), author ? /*#__PURE__*/React.createElement("span", {
            className: style.author
          }, author) : null));
        }
      case 'text':
      default:
        {
          const {
            text,
            unsaved = false
          } = item;
          return /*#__PURE__*/React.createElement("li", {
            key: `${item.text}-${index}`,
            "data-name": item.title
          }, /*#__PURE__*/React.createElement("span", {
            className: classnames(style.valueSimpleText, unsaved && style.unsaved)
          }, text));
        }
    }
  });
};
const buildSectionHeader = section => {
  const {
    title,
    counterText
  } = section;
  if (!title) {
    return null;
  }
  return /*#__PURE__*/React.createElement("div", {
    className: style.sectionHeader
  }, /*#__PURE__*/React.createElement("span", {
    className: style.title
  }, title), counterText ? /*#__PURE__*/React.createElement("span", {
    className: style.counterText
  }, counterText) : null);
};
const buildSections = sections => {
  return sections.map((section, index) => {
    const sectionHeader = buildSectionHeader(section);
    const itemsView = buildItemsOfSection(section.items);
    return /*#__PURE__*/React.createElement("div", {
      key: `summary-section-${index}`,
      "data-step": index,
      "data-name": `summary-section-${index}`,
      className: style.sectionWrapper
    }, sectionHeader, /*#__PURE__*/React.createElement("ul", null, itemsView));
  });
};
const BuildAction = ({
  action,
  side
}) => {
  const {
    onClick,
    text,
    disabled = false,
    icon,
    'aria-label': ariaLabel
  } = action;
  const handleClick = useMemo(() => () => onClick(), [onClick]);
  if (!action) return null;
  const buttonProps = {
    type: 'text',
    label: text,
    disabled,
    'aria-label': ariaLabel,
    'data-name': `${icon}-button-${side}`,
    onClick: handleClick,
    icon: {
      position: 'left',
      type: icon
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: style.button
  }, /*#__PURE__*/React.createElement(ButtonLink, buttonProps));
};
const checkOnClose = (checked, summaryElement, onCloseSummary, clickEvent) => {
  if (checked) {
    if (summaryElement && summaryElement.current && !summaryElement.current.contains(clickEvent.target)) {
      onCloseSummary();
    }
  }
};
const WizardSummary = props => {
  const {
    title,
    sections,
    action,
    side
  } = props;
  const sectionsView = buildSections(sections);
  const idSwitch = _uniqueId('open-summary-wizard');
  const summaryElement = useRef(null);
  const [checked, setChecked] = useState(false);
  const onCloseSummary = () => setChecked(false);
  const handleOnChange = useCallback(() => {
    if (!checked) {
      document.addEventListener('click', clickEvent => checkOnClose(!checked, summaryElement, onCloseSummary, clickEvent));
      document.addEventListener('touchstart', clickEvent => checkOnClose(!checked, summaryElement, onCloseSummary, clickEvent));
    } else {
      document.removeEventListener('click', clickEvent => checkOnClose(!checked, summaryElement, onCloseSummary, clickEvent));
      document.removeEventListener('touchstart', clickEvent => checkOnClose(!checked, summaryElement, onCloseSummary, clickEvent));
    }
    setChecked(!checked);
  }, [checked]);
  return /*#__PURE__*/React.createElement("div", {
    className: style.container,
    ref: summaryElement
  }, /*#__PURE__*/React.createElement("span", {
    className: style.desktopSummaryTitle,
    "data-name": `summary-title-${side}`
  }, title), /*#__PURE__*/React.createElement("input", {
    type: "checkbox",
    id: idSwitch,
    name: "toogle",
    title: idSwitch,
    className: style.checkbox,
    "data-name": `summary-checkbox-${side}`,
    checked: checked,
    onChange: handleOnChange
  }), /*#__PURE__*/React.createElement("div", {
    className: style.summary
  }, /*#__PURE__*/React.createElement("div", {
    className: style.tabletSummaryHeader
  }, /*#__PURE__*/React.createElement("label", {
    htmlFor: idSwitch
  }, /*#__PURE__*/React.createElement("span", {
    className: style.tabletSummaryTitle
  }, title), /*#__PURE__*/React.createElement(ArrowDownIcon, {
    className: style.tabletSummaryIcon
  }))), /*#__PURE__*/React.createElement("div", {
    className: style.summarySections,
    "data-name": `summary-section-${side}`
  }, sectionsView)), /*#__PURE__*/React.createElement("div", {
    className: style.actionZone,
    "data-name": `summary-actions-${side}`
  }, /*#__PURE__*/React.createElement(BuildAction, {
    action: action,
    side: side
  })));
};
BuildAction.propTypes = process.env.NODE_ENV !== "production" ? {
  action: PropTypes.shape({
    icon: PropTypes.string,
    disabled: PropTypes.bool,
    text: PropTypes.string,
    onClick: PropTypes.func,
    'aria-label': PropTypes.string
  }),
  side: PropTypes.string
} : {};
WizardSummary.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.string,
  side: PropTypes.string,
  sections: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
      type: PropTypes.string,
      title: PropTypes.string,
      value: PropTypes.string
    }), PropTypes.shape({
      type: PropTypes.string,
      text: PropTypes.string,
      unsaved: PropTypes.bool
    }), PropTypes.shape({
      type: PropTypes.string,
      badgeList: PropTypes.arrayOf(PropTypes.shape(ContentBadge.propTypes)),
      badgeAriaLabel: PropTypes.string,
      title: PropTypes.string,
      author: PropTypes.string,
      unsaved: PropTypes.bool
    })])),
    counterText: PropTypes.string
  })),
  action: BuildAction.propTypes.action
} : {};
export default WizardSummary;
//# sourceMappingURL=index.js.map