"use strict";

exports.__esModule = true;
exports.default = void 0;
var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
var _split2 = _interopRequireDefault(require("lodash/fp/split"));
var _pipe2 = _interopRequireDefault(require("lodash/fp/pipe"));
var _max2 = _interopRequireDefault(require("lodash/fp/max"));
var _identity2 = _interopRequireDefault(require("lodash/fp/identity"));
var _omit2 = _interopRequireDefault(require("lodash/fp/omit"));
var _keys2 = _interopRequireDefault(require("lodash/fp/keys"));
var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
var _get2 = _interopRequireDefault(require("lodash/fp/get"));
var _find2 = _interopRequireDefault(require("lodash/fp/find"));
var _compact2 = _interopRequireDefault(require("lodash/fp/compact"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _proptypes = require("../../../../util/proptypes");
var _cta = _interopRequireDefault(require("../../../../atom/cta"));
var _picture = _interopRequireDefault(require("../../../../atom/picture"));
var _provider = _interopRequireDefault(require("../../../../atom/provider"));
var _clue = _interopRequireDefault(require("../../../../atom/clue"));
var _answer = _interopRequireDefault(require("../../../../molecule/answer"));
var _loader = _interopRequireDefault(require("../../../../atom/loader"));
var _swapper = _interopRequireDefault(require("../../../../hoc/swapper"));
var _videoPlayer = _interopRequireDefault(require("../../../../molecule/video-player"));
var _pdf = _interopRequireDefault(require("../../../../molecule/pdf"));
var _audio = _interopRequireDefault(require("../../../../molecule/audio"));
var _resourceBrowser = _interopRequireDefault(require("../../../../organism/resource-browser"));
var _cmPopin = _interopRequireDefault(require("../../../../molecule/cm-popin"));
var _footer = _interopRequireDefault(require("./footer"));
var _header = _interopRequireDefault(require("./header"));
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 }; }
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); }
const MediaView = ({
  media
}) => {
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.contextMedia
  }, /*#__PURE__*/_react.default.createElement(_picture.default, {
    src: media
  }));
};
MediaView.propTypes = process.env.NODE_ENV !== "production" ? {
  media: _picture.default.propTypes.src
} : {};

/*
 * Content types
 */

const ClueContent = (props, context) => {
  const {
    text,
    starsDiff,
    onClickSeeClue
  } = props;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.clueWrapper
  }, /*#__PURE__*/_react.default.createElement(_clue.default, {
    text: text,
    starsDiff: starsDiff,
    onClick: onClickSeeClue
  }));
};
ClueContent.propTypes = process.env.NODE_ENV !== "production" ? {
  text: _propTypes.default.string,
  starsDiff: _propTypes.default.number,
  onClickSeeClue: _propTypes.default.func
} : {};
const Bar = ({
  total,
  color,
  current
}) => {
  const _current = (0, _max2.default)([current, 0]);
  if (!total) {
    return null;
  }
  const stepWidth = _current / total * 100;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.stepBar,
    style: {
      backgroundColor: color,
      width: `${stepWidth}%`
    }
  });
};
Bar.propTypes = process.env.NODE_ENV !== "production" ? {
  current: _propTypes.default.number.isRequired,
  total: _propTypes.default.number,
  color: _proptypes.ColorPropType
} : {};
const Step = ({
  step,
  color
}) => {
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-name": "step"
  }, /*#__PURE__*/_react.default.createElement("div", {
    "data-name": "counter",
    className: _style.default.stepCount
  }, /*#__PURE__*/_react.default.createElement("span", {
    style: {
      color
    }
  }, step.current), "/", step.total), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.stepWrapper
  }, /*#__PURE__*/_react.default.createElement(_swapper.default, _extends({}, step, {
    color: color,
    current: step.current - 1
  }), /*#__PURE__*/_react.default.createElement(Bar, _extends({}, step, {
    color: color
  })))));
};
Step.propTypes = process.env.NODE_ENV !== "production" ? {
  step: _propTypes.default.shape({
    current: Bar.propTypes.current,
    total: Bar.propTypes.total
  }),
  color: _proptypes.ColorPropType
} : {};
const NewMedia = (props, context) => {
  const {
    translate
  } = context;
  const {
    onClick,
    step
  } = props;
  const current = (0, _get2.default)('current', step);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: `${_style.default.guideWrapper} ${_style.default.newMedia}`,
    onClick: onClick,
    "data-name": "newMedia"
  }, /*#__PURE__*/_react.default.createElement("span", null, translate(step === null || current === 1 ? 'See lesson' : 'New media')));
};
NewMedia.propTypes = process.env.NODE_ENV !== "production" ? {
  onClick: _propTypes.default.func,
  step: Step.propTypes.step
} : {};
NewMedia.contextTypes = {
  translate: _provider.default.childContextTypes.translate
};
const ReviewLesson = (props, context) => {
  const {
    translate
  } = context;
  const {
    onClick
  } = props;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: `${_style.default.guideWrapper} ${_style.default.reviewLesson}`,
    onClick: onClick,
    "data-name": "reviewLesson"
  }, /*#__PURE__*/_react.default.createElement("span", null, translate('Review lesson')));
};
ReviewLesson.propTypes = process.env.NODE_ENV !== "production" ? {
  onClick: _propTypes.default.func
} : {};
ReviewLesson.contextTypes = {
  translate: _provider.default.childContextTypes.translate
};
const AnswerContent = ({
  answerType,
  help,
  question
}) => /*#__PURE__*/_react.default.createElement(_answer.default, _extends({}, answerType, {
  question: question,
  help: help
}));
AnswerContent.propTypes = process.env.NODE_ENV !== "production" ? {
  answerType: _propTypes.default.shape(_answer.default.propTypes),
  help: _propTypes.default.string,
  question: _propTypes.default.string
} : {};
const MediaContent = (props, context) => {
  const {
    resources,
    starsDiff
  } = props;
  const {
    translate
  } = context;
  const starsToWin = translate('media_stars_to_win', {
    count: Math.abs(starsDiff)
  });
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.resourcesWrapper
  }, /*#__PURE__*/_react.default.createElement(_resourceBrowser.default, {
    resources: resources
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.stars
  }, starsToWin));
};
MediaContent.propTypes = process.env.NODE_ENV !== "production" ? {
  resources: _resourceBrowser.default.propTypes.resources,
  starsDiff: _propTypes.default.number
} : {};
MediaContent.contextTypes = {
  translate: _provider.default.childContextTypes.translate
};
const ContextImage = ({
  src
}) => {
  const images = src.map(({
    url,
    _id
  }) => /*#__PURE__*/_react.default.createElement(MediaView, {
    key: _id,
    media: url
  }));
  return /*#__PURE__*/_react.default.createElement("div", null, images);
};
ContextImage.propTypes = process.env.NODE_ENV !== "production" ? {
  src: _propTypes.default.arrayOf(_propTypes.default.shape({
    _id: _propTypes.default.string,
    url: _propTypes.default.string
  }))
} : {};
const ContextVideo = props => {
  const {
    src
  } = props;
  const videos = src.map(({
    videoId,
    ...childProps
  }) => /*#__PURE__*/_react.default.createElement(_videoPlayer.default, _extends({}, (0, _omit2.default)('id', childProps), {
    id: videoId,
    key: videoId,
    autoplay: false
  })));
  return /*#__PURE__*/_react.default.createElement("div", null, videos);
};
ContextVideo.propTypes = process.env.NODE_ENV !== "production" ? {
  src: _propTypes.default.arrayOf(_propTypes.default.shape(_videoPlayer.default.propTypes))
} : {};
const CONTEXT_MEDIA = {
  img: ContextImage,
  pdf: _pdf.default,
  audio: _audio.default,
  video: ContextVideo
};
const ContextMedia = ({
  media
}) => {
  const ContentType = CONTEXT_MEDIA[media.type];
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-name": "contextMedia",
    className: (0, _classnames.default)(_style.default.contextWrapper, media.type === 'pdf' ? _style.default.contextPdfWrapper : null, media.type === 'audio' ? _style.default.contextAudioWrapper : null)
  }, /*#__PURE__*/_react.default.createElement(ContentType, media));
};
ContextMedia.propTypes = process.env.NODE_ENV !== "production" ? {
  media: _propTypes.default.oneOfType([_propTypes.default.shape({
    ...ContextImage.propTypes,
    type: _propTypes.default.oneOf(['img'])
  }), _propTypes.default.shape({
    ..._pdf.default.propTypes,
    type: _propTypes.default.oneOf(['pdf'])
  }), _propTypes.default.shape({
    ..._audio.default.propTypes,
    type: _propTypes.default.oneOf(['audio'])
  }), _propTypes.default.shape({
    ...ContextVideo.propTypes,
    type: _propTypes.default.oneOf(['video'])
  })])
} : {};
const ContextContent = ({
  slideContext
}) => {
  const descriptionParagraphs = (0, _pipe2.default)((0, _getOr2.default)('', 'description'), (0, _split2.default)('\n'), _compact2.default)(slideContext);
  const paragraphs = descriptionParagraphs.map((paragraph, index) => /*#__PURE__*/_react.default.createElement("p", {
    key: index,
    "data-name": "contextDescription",
    className: (0, _classnames.default)(_style.default.contextDescription, _style.default.innerHTML)
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: paragraph
    }
  }));
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.context
  }, (0, _get2.default)('media.type', slideContext) ? /*#__PURE__*/_react.default.createElement(ContextMedia, {
    media: slideContext.media
  }) : null, paragraphs);
};
ContextContent.propTypes = process.env.NODE_ENV !== "production" ? {
  slideContext: _propTypes.default.shape({
    title: _propTypes.default.string,
    description: _propTypes.default.string,
    media: _propTypes.default.shape(ContextMedia.propTypes)
  })
} : {};
const CONTENT_TYPE = {
  answer: AnswerContent,
  clue: ClueContent,
  context: ContextContent,
  media: MediaContent
};
const Help = ({
  help
}) => /*#__PURE__*/_react.default.createElement("div", {
  className: (0, _classnames.default)(_style.default.helpView, _style.default.innerHTML)
  // eslint-disable-next-line react/no-danger
  ,
  dangerouslySetInnerHTML: {
    __html: help
  }
});
Help.propTypes = process.env.NODE_ENV !== "production" ? {
  help: _propTypes.default.string
} : {};
const ValidateButton = ({
  cta = {}
}) => {
  const {
    disabled
  } = cta;
  (0, _react.useEffect)(() => {
    if ((0, _isEmpty2.default)(cta)) return;
    const keyDownHandler = event => {
      if (event.key === 'Enter' || event.key === ' ' && disabled) {
        event.preventDefault();
      }
    };
    document.addEventListener('keydown', keyDownHandler);
    return () => {
      document.removeEventListener('keydown', keyDownHandler);
    };
  }, [disabled, cta]);
  if ((0, _isEmpty2.default)(cta)) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.ctaWrapper
  }, /*#__PURE__*/_react.default.createElement(_cta.default, _extends({}, cta, {
    className: _style.default.cta
  })));
};
ValidateButton.propTypes = process.env.NODE_ENV !== "production" ? {
  cta: _propTypes.default.shape(_cta.default.propTypes)
} : {};
const ContentLayout = (props, context) => {
  const {
    typeClue: selectedTab,
    answerType: {
      model: {
        type
      } = {}
    } = {},
    question,
    help,
    slideContext
  } = props;
  const ContentType = CONTENT_TYPE[selectedTab];
  const noPaddingRessources = ContentType === MediaContent ? `${_style.default.contentWrapperNoPadding}` : `${_style.default.contentWrapper}`;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: noPaddingRessources,
    style: {
      backgroundColor: 'white'
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    "data-name": "question",
    className: (0, _classnames.default)(selectedTab === 'context' ? _style.default.contextTitle : _style.default.question, _style.default.innerHTML)
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: selectedTab === 'context' ? slideContext.title : question
    }
  }), help && selectedTab === 'answer' && type !== 'qcmDrag' ? /*#__PURE__*/_react.default.createElement(Help, {
    help: help
  }) : null, /*#__PURE__*/_react.default.createElement(ContentType, props), /*#__PURE__*/_react.default.createElement(ValidateButton, props));
};
ContentLayout.contextTypes = {
  translate: _provider.default.childContextTypes.translate,
  skin: _provider.default.childContextTypes.skin
};
ContentLayout.propTypes = process.env.NODE_ENV !== "production" ? {
  typeClue: _propTypes.default.oneOf((0, _keys2.default)(CONTENT_TYPE)),
  question: _propTypes.default.string,
  ...ValidateButton.propTypes
} : {};

/*
 * Loading
 */

const LoadingLayout = ({
  popinError
}) => /*#__PURE__*/_react.default.createElement("div", {
  className: _style.default.loading
}, popinError ? /*#__PURE__*/_react.default.createElement(_cmPopin.default, popinError) : /*#__PURE__*/_react.default.createElement(_loader.default, null));
LoadingLayout.propTypes = process.env.NODE_ENV !== "production" ? {
  popinError: _propTypes.default.shape(_cmPopin.default.propTypes)
} : {};
const LoadedLayout = ({
  question,
  step,
  ...props
}) => {
  return question ? /*#__PURE__*/_react.default.createElement(ContentLayout, _extends({}, props, {
    question: question
  })) : /*#__PURE__*/_react.default.createElement(LoadingLayout, props);
};
LoadedLayout.propTypes = process.env.NODE_ENV !== "production" ? {
  ...ContentLayout.propTypes,
  question: ContentLayout.propTypes.question
} : {};

/*
 * Errors
 */

const ErrorMessage = ({
  errorMsg
}) => /*#__PURE__*/_react.default.createElement("div", {
  className: _style.default.contentWrapper
}, /*#__PURE__*/_react.default.createElement("div", {
  className: _style.default.error
}, errorMsg));
ErrorMessage.propTypes = process.env.NODE_ENV !== "production" ? {
  errorMsg: _propTypes.default.string
} : {};
const Content = ({
  error,
  ...props
}) => error ? /*#__PURE__*/_react.default.createElement(ErrorMessage, props) : /*#__PURE__*/_react.default.createElement(LoadedLayout, props);
Content.propTypes = process.env.NODE_ENV !== "production" ? {
  error: _propTypes.default.bool
} : {};

/*
 * SlidesPlayer
 */

const SlidesPlayer = (props, context) => {
  const {
    header,
    step,
    buttons,
    showNewMedia = false,
    showReviewLesson = false
  } = props;
  const {
    skin
  } = context;
  const stepColor = (0, _get2.default)('common.primary', skin);
  const mediaButton = (0, _find2.default)({
    type: 'media'
  }, buttons) || {};
  const {
    onClick = _identity2.default
  } = mediaButton;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.wrapper,
    "data-name": "slidesPlayer"
  }, header ? /*#__PURE__*/_react.default.createElement(_header.default, header) : null, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.contentProgression
  }, step ? /*#__PURE__*/_react.default.createElement(Step, {
    step: step,
    color: stepColor
  }) : null, showNewMedia && !showReviewLesson ? /*#__PURE__*/_react.default.createElement(NewMedia, {
    onClick: onClick,
    step: step
  }) : null, showReviewLesson && !showNewMedia ? /*#__PURE__*/_react.default.createElement(ReviewLesson, {
    onClick: onClick
  }) : null, /*#__PURE__*/_react.default.createElement(Content, props)), /*#__PURE__*/_react.default.createElement(_footer.default, {
    buttons: buttons
  }));
};
SlidesPlayer.TYPE = CONTENT_TYPE;
SlidesPlayer.contextTypes = {
  translate: _provider.default.childContextTypes.translate,
  skin: _provider.default.childContextTypes.skin
};
SlidesPlayer.propTypes = process.env.NODE_ENV !== "production" ? {
  cta: ValidateButton.propTypes.cta,
  step: Step.propTypes.step,
  buttons: _footer.default.propTypes.buttons,
  header: _propTypes.default.shape(_header.default.propTypes),
  showNewMedia: _propTypes.default.bool,
  showReviewLesson: _propTypes.default.bool,
  backgroundUrl: _proptypes.SrcPropType,
  popinError: _propTypes.default.shape(_cmPopin.default.propTypes)
} : {};
var _default = exports.default = SlidesPlayer;
//# sourceMappingURL=index.js.map