"use strict";

exports.__esModule = true;
exports.default = void 0;
var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
var _isNil2 = _interopRequireDefault(require("lodash/fp/isNil"));
var _identity2 = _interopRequireDefault(require("lodash/fp/identity"));
var _keys2 = _interopRequireDefault(require("lodash/fp/keys"));
var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
var _react = _interopRequireWildcard(require("react"));
var _novaIcons = require("@coorpacademy/nova-icons");
var _cssColorFunction = require("css-color-function");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _externalContent = require("../../util/external-content");
var _provider = _interopRequireDefault(require("../../atom/provider"));
var _loader = _interopRequireDefault(require("../../atom/loader"));
var _button = _interopRequireDefault(require("../../atom/button"));
var _externalContentViewer = _interopRequireDefault(require("../../molecule/external-content-viewer"));
var _cmPopin = _interopRequireDefault(require("../../molecule/cm-popin"));
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 defaultWrapperStyle = {
  default: _style.default.defaultStyle,
  cockpit: _style.default.defaultCockpit,
  mobile: _style.default.defaultStyle
};
const ExternalCourse = (props, context) => {
  const {
    name,
    type,
    url,
    quit,
    complete,
    warning,
    loading,
    backgroundImageUrl,
    contentType,
    mode = 'default',
    onTop = {},
    closePopin
  } = props;
  const {
    skin
  } = context;
  const primary = (0, _getOr2.default)('#00B0FF', 'common.primary', skin);
  const IconType = _externalContent.EXTERNAL_CONTENT_ICONS[type].icon;
  const IconColor = _externalContent.EXTERNAL_CONTENT_ICONS[type].color;
  const mainContentSlot = (0, _react.useMemo)(() => {
    return loading ? /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.loader
    }, /*#__PURE__*/_react.default.createElement(_loader.default, null)) : /*#__PURE__*/_react.default.createElement(_externalContentViewer.default, {
      url: url,
      mode: mode,
      backgroundImageUrl: backgroundImageUrl,
      contentType: contentType
    });
  }, [loading, url, mode, contentType, backgroundImageUrl]);
  const handleOnClick = (0, _react.useCallback)(field => {
    const onClick = (0, _getOr2.default)(_noop2.default, ['onClick'], field);
    return e => {
      e.stopPropagation();
      e.preventDefault();
      return onClick(e);
    };
  }, []);
  const completeButton = (0, _react.useMemo)(() => {
    return !(0, _isNil2.default)(complete) ? /*#__PURE__*/_react.default.createElement(_button.default, {
      type: "button",
      disabled: loading ? true : complete.disabled,
      onClick: loading ? _identity2.default : handleOnClick(complete),
      submitValue: complete.label,
      style: {
        backgroundColor: complete.disabled || loading ? (0, _cssColorFunction.convert)(`color(${primary} a(-50%))`) : primary,
        cursor: loading ? 'progress' : 'pointer'
      },
      className: (0, _classnames.default)(_style.default.completeCta, complete.disabled || loading ? _style.default.disabled : null, loading ? _style.default.loading : null),
      "data-testid": "complete-button"
    }) : null;
  }, [complete, loading, primary, handleOnClick]);
  const warningButton = (0, _react.useMemo)(() => {
    return !(0, _isNil2.default)(warning) ? /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.leftSection
    }, /*#__PURE__*/_react.default.createElement("div", {
      onClick: handleOnClick(warning),
      className: (0, _classnames.default)(_style.default.iconLabel, _style.default.link)
    }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidInterfaceFeedbackInterfaceQuestionMark, {
      className: _style.default.iconQuestion,
      width: 24,
      height: 24
    }), /*#__PURE__*/_react.default.createElement("span", null, warning.label))) : null;
  }, [handleOnClick, warning]);
  const quitButton = (0, _react.useMemo)(() => {
    return !(0, _isNil2.default)(quit) ? /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.leftSection
    }, /*#__PURE__*/_react.default.createElement("span", {
      className: (0, _classnames.default)(_style.default.quitCta, loading ? _style.default.loading : null),
      onClick: loading ? _identity2.default : handleOnClick(quit)
    }, quit.label)) : null;
  }, [quit, loading, handleOnClick]);
  const titleSection = (0, _react.useMemo)(() => {
    return !(0, _isNil2.default)(name) ? /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames.default)(_style.default.iconLabel, _style.default.title)
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.oval,
      style: {
        backgroundColor: IconColor
      }
    }, /*#__PURE__*/_react.default.createElement(IconType, {
      className: _style.default.iconHeader
    })), /*#__PURE__*/_react.default.createElement("span", {
      className: _style.default.innerHTML
      // eslint-disable-next-line react/no-danger
      ,
      dangerouslySetInnerHTML: {
        __html: name
      }
    })) : null;
  }, [name, IconColor]);
  const header = (0, _react.useMemo)(() => {
    return !(0, _isNil2.default)(quit) || !(0, _isEmpty2.default)(name) ? /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.header
    }, quitButton, titleSection, (0, _isNil2.default)(quit) ? null : /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.rightSection
    })) : null;
  }, [name, titleSection, quit, quitButton]);
  const footer = (0, _react.useMemo)(() => {
    return !(0, _isNil2.default)(warning) || !(0, _isNil2.default)(complete) ? /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.footer
    }, warningButton, completeButton, (0, _isNil2.default)(warning) ? null : /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.rightSection
    })) : null;
  }, [warning, warningButton, complete, completeButton]);
  const popin = (0, _react.useMemo)(() => {
    return !(0, _isNil2.default)(closePopin) ? /*#__PURE__*/_react.default.createElement(_cmPopin.default, closePopin) : null;
  }, [closePopin]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(defaultWrapperStyle[mode], onTop.header && _style.default.onTopHeader, onTop.footer && _style.default.onTopFooter)
  }, header, popin, mainContentSlot, footer);
};
ExternalCourse.propTypes = process.env.NODE_ENV !== "production" ? {
  name: _propTypes.default.string,
  type: _propTypes.default.oneOf((0, _keys2.default)(_externalContent.EXTERNAL_CONTENT_ICONS)),
  onTop: _propTypes.default.shape({
    header: _propTypes.default.bool,
    footer: _propTypes.default.bool
  }),
  url: _propTypes.default.string.isRequired,
  quit: _propTypes.default.shape({
    label: _propTypes.default.string.isRequired,
    onClick: _propTypes.default.func
  }),
  complete: _propTypes.default.shape({
    label: _propTypes.default.string.isRequired,
    disabled: _propTypes.default.bool,
    onClick: _propTypes.default.func
  }),
  warning: _propTypes.default.shape({
    label: _propTypes.default.string.isRequired,
    onClick: _propTypes.default.func
  }),
  loading: _propTypes.default.bool,
  backgroundImageUrl: _propTypes.default.string,
  contentType: _propTypes.default.string,
  mode: _propTypes.default.string,
  closePopin: _propTypes.default.shape({
    ..._cmPopin.default.propTypes
  })
} : {};
ExternalCourse.contextTypes = {
  skin: _provider.default.childContextTypes.skin
};
var _default = exports.default = ExternalCourse;
//# sourceMappingURL=index.js.map