import _isEmpty from "lodash/fp/isEmpty";
import _getOr from "lodash/fp/getOr";
import _get from "lodash/fp/get";
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 from 'react';
import PropTypes from 'prop-types';
import Button from '../../atom/button';
import Provider from '../../atom/provider';
import Discussion from '../../organism/discussion';
import ResourceBrowser from '../../organism/resource-browser';
import style from './style.css';
const ScopeContent = (props, context) => {
  const {
    translate,
    skin
  } = context;
  const {
    content
  } = props;
  const lstitle = translate('At the end of this level, you will be able to_');
  const _chaptersTitle = translate('chapters');
  const time = _getOr('', 'time', content);
  const title = _getOr('', 'title', content);
  const _skills = _getOr([], 'skills', content);
  const _chapters = _getOr([], 'chapters', content);
  const _resources = _getOr([], 'resources', content);
  const skillsTitle = _getOr(lstitle, 'skillsTitle', content);
  const chaptersTitle = _getOr(_chaptersTitle, 'chaptersTitle', content);
  const onClick = _get('onClick', content);
  const buttonLabel = _get('buttonLabel', content);
  const discussion = _get('discussion', content);
  const skills = _skills.map((skill, index) => /*#__PURE__*/React.createElement("li", {
    key: index
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: skill
    }
  }));
  const chapters = _chapters.map((chapter, index) => /*#__PURE__*/React.createElement("li", {
    key: index
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: chapter.name
    }
  }));
  const ctaView = onClick ? /*#__PURE__*/React.createElement(Button, {
    "data-name": "cta",
    type: "link",
    className: style.cta,
    onClick: onClick,
    submitValue: buttonLabel,
    style: {
      backgroundColor: _get('common.primary', skin)
    }
  }) : null;
  return content && title ? /*#__PURE__*/React.createElement("div", {
    "data-name": "scopeContent",
    className: style.scopeContent
  }, /*#__PURE__*/React.createElement("div", {
    "data-name": "description",
    className: style.desc
  }, /*#__PURE__*/React.createElement("div", {
    className: style.infos
  }, /*#__PURE__*/React.createElement("div", {
    className: style.title
  }, /*#__PURE__*/React.createElement("div", {
    className: style.innerHTML
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: title
    }
  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    "data-name": "duration",
    className: style.time
  }, time))), ctaView), /*#__PURE__*/React.createElement("div", {
    className: style.columnLayout
  }, _isEmpty(skills) ? null : /*#__PURE__*/React.createElement("div", {
    className: style.skills
  }, /*#__PURE__*/React.createElement("div", {
    className: style.coltitle
  }, skillsTitle), /*#__PURE__*/React.createElement("ul", {
    className: style.dottedlist
  }, skills)), _isEmpty(chapters) ? null : /*#__PURE__*/React.createElement("div", {
    className: style.column
  }, /*#__PURE__*/React.createElement("div", {
    className: style.coltitle
  }, chaptersTitle), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("ul", {
    className: style.roundedlist
  }, chapters))))), !_isEmpty(_resources) ? /*#__PURE__*/React.createElement("div", {
    "data-name": "description",
    className: style.bordered
  }, /*#__PURE__*/React.createElement(ResourceBrowser, {
    resources: _resources
  })) : null, discussion ? /*#__PURE__*/React.createElement(Discussion, _extends({}, discussion, {
    className: style.discussion
  })) : null) : /*#__PURE__*/React.createElement("div", {
    "data-name": "discussion"
  }, discussion ? /*#__PURE__*/React.createElement(Discussion, _extends({}, discussion, {
    className: style.discussion
  })) : null);
};
ScopeContent.contextTypes = {
  skin: Provider.childContextTypes.skin,
  translate: Provider.childContextTypes.translate
};
ScopeContent.propTypes = process.env.NODE_ENV !== "production" ? {
  content: PropTypes.shape({
    title: PropTypes.string,
    skillsTitle: PropTypes.string,
    chaptersTitle: PropTypes.string,
    time: PropTypes.string,
    onClick: PropTypes.func,
    buttonLabel: PropTypes.string,
    skills: PropTypes.arrayOf(PropTypes.string),
    chapters: PropTypes.arrayOf(PropTypes.object),
    course_scope: PropTypes.arrayOf(PropTypes.string),
    resources: ResourceBrowser.propTypes.resources,
    discussion: PropTypes.shape(Discussion.propTypes)
  })
} : {};
export default ScopeContent;
//# sourceMappingURL=index.js.map