import _isEmpty from "lodash/fp/isEmpty";
import _isNil from "lodash/fp/isNil";
import _identity from "lodash/fp/identity";
import _keys from "lodash/fp/keys";
import _getOr from "lodash/fp/getOr";
import _noop from "lodash/fp/noop";
import React, { useCallback, useMemo } from 'react';
import { NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon } from '@coorpacademy/nova-icons';
import { convert } from 'css-color-function';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { EXTERNAL_CONTENT_ICONS } from '../../util/external-content';
import Provider from '../../atom/provider';
import Loader from '../../atom/loader';
import Button from '../../atom/button';
import ExternalContentViewer from '../../molecule/external-content-viewer';
import CmPopin from '../../molecule/cm-popin';
import style from './style.css';
const defaultWrapperStyle = {
  default: style.defaultStyle,
  cockpit: style.defaultCockpit,
  mobile: style.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 = _getOr('#00B0FF', 'common.primary', skin);
  const IconType = EXTERNAL_CONTENT_ICONS[type].icon;
  const IconColor = EXTERNAL_CONTENT_ICONS[type].color;
  const mainContentSlot = useMemo(() => {
    return loading ? /*#__PURE__*/React.createElement("div", {
      className: style.loader
    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(ExternalContentViewer, {
      url: url,
      mode: mode,
      backgroundImageUrl: backgroundImageUrl,
      contentType: contentType
    });
  }, [loading, url, mode, contentType, backgroundImageUrl]);
  const handleOnClick = useCallback(field => {
    const onClick = _getOr(_noop, ['onClick'], field);
    return e => {
      e.stopPropagation();
      e.preventDefault();
      return onClick(e);
    };
  }, []);
  const completeButton = useMemo(() => {
    return !_isNil(complete) ? /*#__PURE__*/React.createElement(Button, {
      type: "button",
      disabled: loading ? true : complete.disabled,
      onClick: loading ? _identity : handleOnClick(complete),
      submitValue: complete.label,
      style: {
        backgroundColor: complete.disabled || loading ? convert(`color(${primary} a(-50%))`) : primary,
        cursor: loading ? 'progress' : 'pointer'
      },
      className: classnames(style.completeCta, complete.disabled || loading ? style.disabled : null, loading ? style.loading : null),
      "data-testid": "complete-button"
    }) : null;
  }, [complete, loading, primary, handleOnClick]);
  const warningButton = useMemo(() => {
    return !_isNil(warning) ? /*#__PURE__*/React.createElement("div", {
      className: style.leftSection
    }, /*#__PURE__*/React.createElement("div", {
      onClick: handleOnClick(warning),
      className: classnames(style.iconLabel, style.link)
    }, /*#__PURE__*/React.createElement(QuestionIcon, {
      className: style.iconQuestion,
      width: 24,
      height: 24
    }), /*#__PURE__*/React.createElement("span", null, warning.label))) : null;
  }, [handleOnClick, warning]);
  const quitButton = useMemo(() => {
    return !_isNil(quit) ? /*#__PURE__*/React.createElement("div", {
      className: style.leftSection
    }, /*#__PURE__*/React.createElement("span", {
      className: classnames(style.quitCta, loading ? style.loading : null),
      onClick: loading ? _identity : handleOnClick(quit)
    }, quit.label)) : null;
  }, [quit, loading, handleOnClick]);
  const titleSection = useMemo(() => {
    return !_isNil(name) ? /*#__PURE__*/React.createElement("div", {
      className: classnames(style.iconLabel, style.title)
    }, /*#__PURE__*/React.createElement("div", {
      className: style.oval,
      style: {
        backgroundColor: IconColor
      }
    }, /*#__PURE__*/React.createElement(IconType, {
      className: style.iconHeader
    })), /*#__PURE__*/React.createElement("span", {
      className: style.innerHTML
      // eslint-disable-next-line react/no-danger
      ,
      dangerouslySetInnerHTML: {
        __html: name
      }
    })) : null;
  }, [name, IconColor]);
  const header = useMemo(() => {
    return !_isNil(quit) || !_isEmpty(name) ? /*#__PURE__*/React.createElement("div", {
      className: style.header
    }, quitButton, titleSection, _isNil(quit) ? null : /*#__PURE__*/React.createElement("div", {
      className: style.rightSection
    })) : null;
  }, [name, titleSection, quit, quitButton]);
  const footer = useMemo(() => {
    return !_isNil(warning) || !_isNil(complete) ? /*#__PURE__*/React.createElement("div", {
      className: style.footer
    }, warningButton, completeButton, _isNil(warning) ? null : /*#__PURE__*/React.createElement("div", {
      className: style.rightSection
    })) : null;
  }, [warning, warningButton, complete, completeButton]);
  const popin = useMemo(() => {
    return !_isNil(closePopin) ? /*#__PURE__*/React.createElement(CmPopin, closePopin) : null;
  }, [closePopin]);
  return /*#__PURE__*/React.createElement("div", {
    className: classnames(defaultWrapperStyle[mode], onTop.header && style.onTopHeader, onTop.footer && style.onTopFooter)
  }, header, popin, mainContentSlot, footer);
};
ExternalCourse.propTypes = process.env.NODE_ENV !== "production" ? {
  name: PropTypes.string,
  type: PropTypes.oneOf(_keys(EXTERNAL_CONTENT_ICONS)),
  onTop: PropTypes.shape({
    header: PropTypes.bool,
    footer: PropTypes.bool
  }),
  url: PropTypes.string.isRequired,
  quit: PropTypes.shape({
    label: PropTypes.string.isRequired,
    onClick: PropTypes.func
  }),
  complete: PropTypes.shape({
    label: PropTypes.string.isRequired,
    disabled: PropTypes.bool,
    onClick: PropTypes.func
  }),
  warning: PropTypes.shape({
    label: PropTypes.string.isRequired,
    onClick: PropTypes.func
  }),
  loading: PropTypes.bool,
  backgroundImageUrl: PropTypes.string,
  contentType: PropTypes.string,
  mode: PropTypes.string,
  closePopin: PropTypes.shape({
    ...CmPopin.propTypes
  })
} : {};
ExternalCourse.contextTypes = {
  skin: Provider.childContextTypes.skin
};
export default ExternalCourse;
//# sourceMappingURL=index.js.map