function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { useRef, useEffect, useMemo } from 'react';
import { NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond, NovaSolidApplicationsWindowUpload3 as WindowUpload, NovaLineSettingsCookie as Cookie, NovaSolidSpaceMoonRocket as MoonRocket, NovaCompositionCoorpacademyPadlock as LockIcon, NovaLineStatusCheckCircle1 as CheckCircle1, NovaSolidFilesBasicFileLines as FileLinesIcon, NovaSolidInterfaceFeedbackInterfaceAlertRounded as AlertIcon } from '@coorpacademy/nova-icons';
import map from 'lodash/fp/map';
import isEmpty from 'lodash/fp/isEmpty';
import classNames from 'classnames';
import Provider from '../../atom/provider';
import ButtonLink from '../../atom/button-link';
import ButtonLinkIcon from '../../atom/button-link-icon';
import InputSwitch from '../../atom/input-switch';
import Title from '../../atom/title';
import CardsGrid from '../../organism/cards-grid';
import ListItems from '../../organism/list-items';
import Link from '../../atom/link';
import Icon from '../../atom/icon';
import style from './style.css';
import propTypes from './types';

// DEPRECATED
const LOGO = {
  AlertDiamond,
  WindowUpload,
  MoonRocket,
  CheckCircle1,
  AlertIcon
};
const IconType = {
  lockedContent: /*#__PURE__*/React.createElement(LockIcon, {
    className: style.lockIcon
  }),
  fileZipped: /*#__PURE__*/React.createElement("div", {
    className: style.filesListIconContainer
  }, /*#__PURE__*/React.createElement(FileLinesIcon, {
    className: style.filesListIcon
  }))
};
const CMPopin = props => {
  const {
    content,
    mode = 'alert',
    firstButton,
    secondButton,
    onClose,
    header,
    icon,
    backgroundImageUrl,
    descriptionText,
    thirdButton,
    cookieTitle,
    descriptionBtnTxt,
    listBtnSwicth,
    items,
    link
  } = props;
  const backgroundImageStyle = backgroundImageUrl ? {
    backgroundImage: `url(${backgroundImageUrl})`,
    backgroundSize: 'cover'
  } : null;
  const handleCloseButton = useMemo(() => () => onClose(), [onClose]);
  const nodeRef = useRef(null);
  useEffect(() => {
    if (mode === 'items') {
      const closePopin = e => {
        if (nodeRef && nodeRef.current && !nodeRef.current.contains(e.target)) {
          handleCloseButton();
        }
      };
      const handleKeyDown = e => {
        if (e?.key === 'Escape') {
          handleCloseButton();
        }
      };
      document.addEventListener('click', closePopin);
      document.addEventListener('touchstart', closePopin);
      document.addEventListener('keydown', handleKeyDown);
      return () => {
        document.removeEventListener('click', closePopin);
        document.removeEventListener('touchstart', closePopin);
        document.removeEventListener('keydown', handleKeyDown);
      };
    }
  }, [handleCloseButton, mode, onClose]);
  const wrapperPopinStyle = classNames(style.popin, mode === 'cookie' && style.popinCookie, mode === 'list' && style.popinFilesList, mode === 'items' && style.popinItems);
  const buildIcon = () => {
    if (typeof icon === 'string') {
      const LogoComponent = LOGO[icon];
      return LogoComponent ? /*#__PURE__*/React.createElement(LogoComponent, {
        className: style.icon
      }) : null;
    }
    return !isEmpty(icon) ? /*#__PURE__*/React.createElement(Icon, _extends({}, icon, {
      className: style.icon
    })) : null;
  };
  const buildHeader = () => {
    if (header) {
      const {
        title,
        headerIcon,
        backgroundImage
      } = header;
      const TopTitleIcon = IconType[headerIcon];
      return /*#__PURE__*/React.createElement(React.Fragment, null, title ? /*#__PURE__*/React.createElement("div", {
        className: style.headerContent
      }, TopTitleIcon, /*#__PURE__*/React.createElement(Title, title)) : null, backgroundImage ? /*#__PURE__*/React.createElement("img", {
        className: style.headerBackground,
        src: backgroundImage
      }) : null);
    }
    if (mode === 'cookie') return /*#__PURE__*/React.createElement("div", {
      className: style.cookieHeader
    }, /*#__PURE__*/React.createElement("div", {
      className: style.cookieIconContainer
    }, /*#__PURE__*/React.createElement(Cookie, {
      className: style.cookieIcon
    })), /*#__PURE__*/React.createElement("div", {
      className: style.cookieTitle
    }, cookieTitle));
  };
  const renderHeader = () => {
    const headerContent = buildHeader();
    const close = onClose ? /*#__PURE__*/React.createElement("div", {
      className: style.onCloseButton
    }, /*#__PURE__*/React.createElement(ButtonLinkIcon, {
      onClick: handleCloseButton,
      "data-name": 'close-icon',
      "aria-label": 'close-icon',
      size: "small",
      icon: "close"
    })) : null;
    if (isEmpty(headerContent) && isEmpty(close)) return null;
    return /*#__PURE__*/React.createElement("header", {
      className: style.popinHeader
    }, headerContent, close);
  };
  const getClassBtnSwitch = (index, btnList) => {
    switch (index) {
      case 0:
        return style.firstBtnSwitchContainer;
      case btnList.length - 1:
        return style.lastBtnSwitchContainer;
      default:
        return style.singleSwitchContainer;
    }
  };
  const renderBtnSwitch = () => {
    return map.convert({
      cap: false
    })((el, index) => {
      const {
        type,
        title,
        value,
        onChange,
        titlePosition,
        theme,
        details,
        requiredSelection,
        disabled,
        id,
        'data-name': dataName
      } = el;
      return /*#__PURE__*/React.createElement("div", {
        key: index,
        className: getClassBtnSwitch(index, listBtnSwicth)
      }, /*#__PURE__*/React.createElement(InputSwitch, {
        type,
        title,
        value,
        onChange,
        titlePosition,
        theme,
        details,
        requiredSelection,
        disabled,
        id,
        'data-name': dataName
      }));
    })(listBtnSwicth);
  };
  const renderItems = () => {
    if (isEmpty(items)) return null;
    const {
      type,
      list
    } = items;
    if (type === 'content') return /*#__PURE__*/React.createElement("div", {
      className: style.itemsContainer,
      "data-name": 'cm-popin-cards'
    }, /*#__PURE__*/React.createElement(CardsGrid, list));
    if (type === 'list') return /*#__PURE__*/React.createElement("div", {
      className: style.filesListContainer
    }, /*#__PURE__*/React.createElement(ListItems, list));
    return null;
  };
  const renderContent = () => {
    if (mode === 'items' || mode === 'list') return;
    const isCookieOrInformations = mode === 'cookie' || mode === 'information';
    const renderContentTitle = () => {
      if (!content) return null;
      if (isCookieOrInformations) return /*#__PURE__*/React.createElement("p", {
        className: mode === 'alert' ? style.content : style.message,
        "data-name": 'cm-popin-content'
        // eslint-disable-next-line react/no-danger
        ,
        dangerouslySetInnerHTML: {
          __html: content
        }
      });
      return /*#__PURE__*/React.createElement("div", {
        className: mode === 'alert' ? style.content : style.message
      }, /*#__PURE__*/React.createElement(Title, {
        title: content,
        "data-name": 'cm-popin-content'
      }));
    };
    return /*#__PURE__*/React.createElement("div", {
      className: isCookieOrInformations ? style.cookieTitleContainer : style.titleContainer
    }, buildIcon(), /*#__PURE__*/React.createElement("div", {
      className: style.contentSection
    }, renderContentTitle(), descriptionText ? /*#__PURE__*/React.createElement("div", {
      className: style.descriptionText
    }, descriptionText) : null), link ? /*#__PURE__*/React.createElement(Link, link) : null);
  };
  const renderButtons = () => {
    if (!firstButton && !secondButton && !thirdButton) return null;
    return /*#__PURE__*/React.createElement("div", {
      className: style.buttonContainer
    }, firstButton ? /*#__PURE__*/React.createElement("div", {
      className: firstButton.largeButton ? style.largeButton : style.button
    }, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, firstButton, {
      onClick: firstButton.handleOnclick,
      "data-name": 'cm-popin-cta'
    }))) : null, secondButton ? /*#__PURE__*/React.createElement("div", {
      className: secondButton.largeButton ? style.largeButton : style.button
    }, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, secondButton, {
      onClick: secondButton.handleOnclick,
      "data-name": `cm-popin-cta-${secondButton.type}`
    }))) : null, thirdButton ? /*#__PURE__*/React.createElement("div", {
      className: thirdButton.largeButton ? style.largeButton : style.button
    }, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, thirdButton, {
      onClick: thirdButton.handleOnclick,
      "data-name": `cm-popin-cta-${thirdButton.type}`
    }))) : null);
  };
  return /*#__PURE__*/React.createElement("div", {
    className: mode !== 'cookie' ? style.background : null,
    style: backgroundImageStyle,
    "data-name": 'cm-popin-container'
  }, /*#__PURE__*/React.createElement("div", {
    className: wrapperPopinStyle,
    ref: nodeRef
  }, renderHeader(), renderContent(), descriptionBtnTxt ? /*#__PURE__*/React.createElement("div", {
    className: style.descriptionBtn
  }, descriptionBtnTxt) : null, renderItems(), renderBtnSwitch(), renderButtons()));
};
CMPopin.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
CMPopin.contextTypes = {
  translate: Provider.childContextTypes.translate
};
export default CMPopin;
//# sourceMappingURL=index.js.map