"use strict";

exports.__esModule = true;
exports.default = void 0;
var _uniqueId2 = _interopRequireDefault(require("lodash/fp/uniqueId"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _novaIcons = require("@coorpacademy/nova-icons");
var _listBadges = _interopRequireDefault(require("../list-badges"));
var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
var _contentBadge = _interopRequireDefault(require("../../atom/content-badge"));
var _style = _interopRequireDefault(require("./style.css"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const buildItemsOfSection = items => {
  return items.map((item, index) => {
    const {
      type
    } = item;
    switch (type) {
      case 'mainElement':
        return /*#__PURE__*/_react.default.createElement("li", {
          key: `${item.title}-${index}`,
          "data-name": item.title
        }, /*#__PURE__*/_react.default.createElement("span", {
          className: _style.default.title
        }, item.title), /*#__PURE__*/_react.default.createElement("span", {
          className: _style.default.value
        }, item.value));
      case 'content':
        {
          const {
            badgeList,
            badgeAriaLabel,
            title,
            author,
            unsaved = false
          } = item;
          return /*#__PURE__*/_react.default.createElement("li", {
            className: _style.default.contentWrapper,
            key: `${title}-${index}`,
            "data-name": item.title
          }, /*#__PURE__*/_react.default.createElement("span", {
            className: _style.default.contentCounter
          }, index + 1), /*#__PURE__*/_react.default.createElement("div", {
            className: _style.default.contentItem
          }, /*#__PURE__*/_react.default.createElement(_listBadges.default, {
            "aria-label": badgeAriaLabel,
            items: badgeList
          }), /*#__PURE__*/_react.default.createElement("div", {
            className: (0, _classnames.default)(_style.default.contentTitle, unsaved && _style.default.unsaved),
            title: title
            // eslint-disable-next-line react/no-danger
            ,
            dangerouslySetInnerHTML: {
              __html: title
            }
          }), author ? /*#__PURE__*/_react.default.createElement("span", {
            className: _style.default.author
          }, author) : null));
        }
      case 'text':
      default:
        {
          const {
            text,
            unsaved = false
          } = item;
          return /*#__PURE__*/_react.default.createElement("li", {
            key: `${item.text}-${index}`,
            "data-name": item.title
          }, /*#__PURE__*/_react.default.createElement("span", {
            className: (0, _classnames.default)(_style.default.valueSimpleText, unsaved && _style.default.unsaved)
          }, text));
        }
    }
  });
};
const buildSectionHeader = section => {
  const {
    title,
    counterText
  } = section;
  if (!title) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.sectionHeader
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: _style.default.title
  }, title), counterText ? /*#__PURE__*/_react.default.createElement("span", {
    className: _style.default.counterText
  }, counterText) : null);
};
const buildSections = sections => {
  return sections.map((section, index) => {
    const sectionHeader = buildSectionHeader(section);
    const itemsView = buildItemsOfSection(section.items);
    return /*#__PURE__*/_react.default.createElement("div", {
      key: `summary-section-${index}`,
      "data-step": index,
      "data-name": `summary-section-${index}`,
      className: _style.default.sectionWrapper
    }, sectionHeader, /*#__PURE__*/_react.default.createElement("ul", null, itemsView));
  });
};
const BuildAction = ({
  action,
  side
}) => {
  const {
    onClick,
    text,
    disabled = false,
    icon,
    'aria-label': ariaLabel
  } = action;
  const handleClick = (0, _react.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.default.createElement("div", {
    className: _style.default.button
  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, 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 = (0, _uniqueId2.default)('open-summary-wizard');
  const summaryElement = (0, _react.useRef)(null);
  const [checked, setChecked] = (0, _react.useState)(false);
  const onCloseSummary = () => setChecked(false);
  const handleOnChange = (0, _react.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.default.createElement("div", {
    className: _style.default.container,
    ref: summaryElement
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: _style.default.desktopSummaryTitle,
    "data-name": `summary-title-${side}`
  }, title), /*#__PURE__*/_react.default.createElement("input", {
    type: "checkbox",
    id: idSwitch,
    name: "toogle",
    title: idSwitch,
    className: _style.default.checkbox,
    "data-name": `summary-checkbox-${side}`,
    checked: checked,
    onChange: handleOnChange
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.summary
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.tabletSummaryHeader
  }, /*#__PURE__*/_react.default.createElement("label", {
    htmlFor: idSwitch
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: _style.default.tabletSummaryTitle
  }, title), /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowDown, {
    className: _style.default.tabletSummaryIcon
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.summarySections,
    "data-name": `summary-section-${side}`
  }, sectionsView)), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.actionZone,
    "data-name": `summary-actions-${side}`
  }, /*#__PURE__*/_react.default.createElement(BuildAction, {
    action: action,
    side: side
  })));
};
BuildAction.propTypes = process.env.NODE_ENV !== "production" ? {
  action: _propTypes.default.shape({
    icon: _propTypes.default.string,
    disabled: _propTypes.default.bool,
    text: _propTypes.default.string,
    onClick: _propTypes.default.func,
    'aria-label': _propTypes.default.string
  }),
  side: _propTypes.default.string
} : {};
WizardSummary.propTypes = process.env.NODE_ENV !== "production" ? {
  title: _propTypes.default.string,
  side: _propTypes.default.string,
  sections: _propTypes.default.arrayOf(_propTypes.default.shape({
    title: _propTypes.default.string,
    items: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
      type: _propTypes.default.string,
      title: _propTypes.default.string,
      value: _propTypes.default.string
    }), _propTypes.default.shape({
      type: _propTypes.default.string,
      text: _propTypes.default.string,
      unsaved: _propTypes.default.bool
    }), _propTypes.default.shape({
      type: _propTypes.default.string,
      badgeList: _propTypes.default.arrayOf(_propTypes.default.shape(_contentBadge.default.propTypes)),
      badgeAriaLabel: _propTypes.default.string,
      title: _propTypes.default.string,
      author: _propTypes.default.string,
      unsaved: _propTypes.default.bool
    })])),
    counterText: _propTypes.default.string
  })),
  action: BuildAction.propTypes.action
} : {};
var _default = exports.default = WizardSummary;
//# sourceMappingURL=index.js.map