import _isEmpty from "lodash/fp/isEmpty";
import _split from "lodash/fp/split";
import _pipe from "lodash/fp/pipe";
import _max from "lodash/fp/max";
import _identity from "lodash/fp/identity";
import _omit from "lodash/fp/omit";
import _keys from "lodash/fp/keys";
import _getOr from "lodash/fp/getOr";
import _get from "lodash/fp/get";
import _find from "lodash/fp/find";
import _compact from "lodash/fp/compact";
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, { useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { ColorPropType, SrcPropType } from '../../../../util/proptypes';
import Cta from '../../../../atom/cta';
import Picture from '../../../../atom/picture';
import Provider from '../../../../atom/provider';
import Clue from '../../../../atom/clue';
import Answer from '../../../../molecule/answer';
import Loader from '../../../../atom/loader';
import Swapper from '../../../../hoc/swapper';
import VideoPlayer from '../../../../molecule/video-player';
import PDF from '../../../../molecule/pdf';
import Audio from '../../../../molecule/audio';
import ResourceBrowser from '../../../../organism/resource-browser';
import CMPopin from '../../../../molecule/cm-popin';
import Footer from './footer';
import Header from './header';
import style from './style.css';
const MediaView = ({
  media
}) => {
  return /*#__PURE__*/React.createElement("div", {
    className: style.contextMedia
  }, /*#__PURE__*/React.createElement(Picture, {
    src: media
  }));
};
MediaView.propTypes = process.env.NODE_ENV !== "production" ? {
  media: Picture.propTypes.src
} : {};

/*
 * Content types
 */

const ClueContent = (props, context) => {
  const {
    text,
    starsDiff,
    onClickSeeClue
  } = props;
  return /*#__PURE__*/React.createElement("div", {
    className: style.clueWrapper
  }, /*#__PURE__*/React.createElement(Clue, {
    text: text,
    starsDiff: starsDiff,
    onClick: onClickSeeClue
  }));
};
ClueContent.propTypes = process.env.NODE_ENV !== "production" ? {
  text: PropTypes.string,
  starsDiff: PropTypes.number,
  onClickSeeClue: PropTypes.func
} : {};
const Bar = ({
  total,
  color,
  current
}) => {
  const _current = _max([current, 0]);
  if (!total) {
    return null;
  }
  const stepWidth = _current / total * 100;
  return /*#__PURE__*/React.createElement("div", {
    className: style.stepBar,
    style: {
      backgroundColor: color,
      width: `${stepWidth}%`
    }
  });
};
Bar.propTypes = process.env.NODE_ENV !== "production" ? {
  current: PropTypes.number.isRequired,
  total: PropTypes.number,
  color: ColorPropType
} : {};
const Step = ({
  step,
  color
}) => {
  return /*#__PURE__*/React.createElement("div", {
    "data-name": "step"
  }, /*#__PURE__*/React.createElement("div", {
    "data-name": "counter",
    className: style.stepCount
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      color
    }
  }, step.current), "/", step.total), /*#__PURE__*/React.createElement("div", {
    className: style.stepWrapper
  }, /*#__PURE__*/React.createElement(Swapper, _extends({}, step, {
    color: color,
    current: step.current - 1
  }), /*#__PURE__*/React.createElement(Bar, _extends({}, step, {
    color: color
  })))));
};
Step.propTypes = process.env.NODE_ENV !== "production" ? {
  step: PropTypes.shape({
    current: Bar.propTypes.current,
    total: Bar.propTypes.total
  }),
  color: ColorPropType
} : {};
const NewMedia = (props, context) => {
  const {
    translate
  } = context;
  const {
    onClick,
    step
  } = props;
  const current = _get('current', step);
  return /*#__PURE__*/React.createElement("div", {
    className: `${style.guideWrapper} ${style.newMedia}`,
    onClick: onClick,
    "data-name": "newMedia"
  }, /*#__PURE__*/React.createElement("span", null, translate(step === null || current === 1 ? 'See lesson' : 'New media')));
};
NewMedia.propTypes = process.env.NODE_ENV !== "production" ? {
  onClick: PropTypes.func,
  step: Step.propTypes.step
} : {};
NewMedia.contextTypes = {
  translate: Provider.childContextTypes.translate
};
const ReviewLesson = (props, context) => {
  const {
    translate
  } = context;
  const {
    onClick
  } = props;
  return /*#__PURE__*/React.createElement("div", {
    className: `${style.guideWrapper} ${style.reviewLesson}`,
    onClick: onClick,
    "data-name": "reviewLesson"
  }, /*#__PURE__*/React.createElement("span", null, translate('Review lesson')));
};
ReviewLesson.propTypes = process.env.NODE_ENV !== "production" ? {
  onClick: PropTypes.func
} : {};
ReviewLesson.contextTypes = {
  translate: Provider.childContextTypes.translate
};
const AnswerContent = ({
  answerType,
  help,
  question
}) => /*#__PURE__*/React.createElement(Answer, _extends({}, answerType, {
  question: question,
  help: help
}));
AnswerContent.propTypes = process.env.NODE_ENV !== "production" ? {
  answerType: PropTypes.shape(Answer.propTypes),
  help: PropTypes.string,
  question: PropTypes.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.createElement("div", {
    className: style.resourcesWrapper
  }, /*#__PURE__*/React.createElement(ResourceBrowser, {
    resources: resources
  }), /*#__PURE__*/React.createElement("div", {
    className: style.stars
  }, starsToWin));
};
MediaContent.propTypes = process.env.NODE_ENV !== "production" ? {
  resources: ResourceBrowser.propTypes.resources,
  starsDiff: PropTypes.number
} : {};
MediaContent.contextTypes = {
  translate: Provider.childContextTypes.translate
};
const ContextImage = ({
  src
}) => {
  const images = src.map(({
    url,
    _id
  }) => /*#__PURE__*/React.createElement(MediaView, {
    key: _id,
    media: url
  }));
  return /*#__PURE__*/React.createElement("div", null, images);
};
ContextImage.propTypes = process.env.NODE_ENV !== "production" ? {
  src: PropTypes.arrayOf(PropTypes.shape({
    _id: PropTypes.string,
    url: PropTypes.string
  }))
} : {};
const ContextVideo = props => {
  const {
    src
  } = props;
  const videos = src.map(({
    videoId,
    ...childProps
  }) => /*#__PURE__*/React.createElement(VideoPlayer, _extends({}, _omit('id', childProps), {
    id: videoId,
    key: videoId,
    autoplay: false
  })));
  return /*#__PURE__*/React.createElement("div", null, videos);
};
ContextVideo.propTypes = process.env.NODE_ENV !== "production" ? {
  src: PropTypes.arrayOf(PropTypes.shape(VideoPlayer.propTypes))
} : {};
const CONTEXT_MEDIA = {
  img: ContextImage,
  pdf: PDF,
  audio: Audio,
  video: ContextVideo
};
const ContextMedia = ({
  media
}) => {
  const ContentType = CONTEXT_MEDIA[media.type];
  return /*#__PURE__*/React.createElement("div", {
    "data-name": "contextMedia",
    className: classnames(style.contextWrapper, media.type === 'pdf' ? style.contextPdfWrapper : null, media.type === 'audio' ? style.contextAudioWrapper : null)
  }, /*#__PURE__*/React.createElement(ContentType, media));
};
ContextMedia.propTypes = process.env.NODE_ENV !== "production" ? {
  media: PropTypes.oneOfType([PropTypes.shape({
    ...ContextImage.propTypes,
    type: PropTypes.oneOf(['img'])
  }), PropTypes.shape({
    ...PDF.propTypes,
    type: PropTypes.oneOf(['pdf'])
  }), PropTypes.shape({
    ...Audio.propTypes,
    type: PropTypes.oneOf(['audio'])
  }), PropTypes.shape({
    ...ContextVideo.propTypes,
    type: PropTypes.oneOf(['video'])
  })])
} : {};
const ContextContent = ({
  slideContext
}) => {
  const descriptionParagraphs = _pipe(_getOr('', 'description'), _split('\n'), _compact)(slideContext);
  const paragraphs = descriptionParagraphs.map((paragraph, index) => /*#__PURE__*/React.createElement("p", {
    key: index,
    "data-name": "contextDescription",
    className: classnames(style.contextDescription, style.innerHTML)
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: paragraph
    }
  }));
  return /*#__PURE__*/React.createElement("div", {
    className: style.context
  }, _get('media.type', slideContext) ? /*#__PURE__*/React.createElement(ContextMedia, {
    media: slideContext.media
  }) : null, paragraphs);
};
ContextContent.propTypes = process.env.NODE_ENV !== "production" ? {
  slideContext: PropTypes.shape({
    title: PropTypes.string,
    description: PropTypes.string,
    media: PropTypes.shape(ContextMedia.propTypes)
  })
} : {};
const CONTENT_TYPE = {
  answer: AnswerContent,
  clue: ClueContent,
  context: ContextContent,
  media: MediaContent
};
const Help = ({
  help
}) => /*#__PURE__*/React.createElement("div", {
  className: classnames(style.helpView, style.innerHTML)
  // eslint-disable-next-line react/no-danger
  ,
  dangerouslySetInnerHTML: {
    __html: help
  }
});
Help.propTypes = process.env.NODE_ENV !== "production" ? {
  help: PropTypes.string
} : {};
const ValidateButton = ({
  cta = {}
}) => {
  const {
    disabled
  } = cta;
  useEffect(() => {
    if (_isEmpty(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 (_isEmpty(cta)) {
    return null;
  }
  return /*#__PURE__*/React.createElement("div", {
    className: style.ctaWrapper
  }, /*#__PURE__*/React.createElement(Cta, _extends({}, cta, {
    className: style.cta
  })));
};
ValidateButton.propTypes = process.env.NODE_ENV !== "production" ? {
  cta: PropTypes.shape(Cta.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.contentWrapperNoPadding}` : `${style.contentWrapper}`;
  return /*#__PURE__*/React.createElement("div", {
    className: noPaddingRessources,
    style: {
      backgroundColor: 'white'
    }
  }, /*#__PURE__*/React.createElement("div", {
    "data-name": "question",
    className: classnames(selectedTab === 'context' ? style.contextTitle : style.question, style.innerHTML)
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: selectedTab === 'context' ? slideContext.title : question
    }
  }), help && selectedTab === 'answer' && type !== 'qcmDrag' ? /*#__PURE__*/React.createElement(Help, {
    help: help
  }) : null, /*#__PURE__*/React.createElement(ContentType, props), /*#__PURE__*/React.createElement(ValidateButton, props));
};
ContentLayout.contextTypes = {
  translate: Provider.childContextTypes.translate,
  skin: Provider.childContextTypes.skin
};
ContentLayout.propTypes = process.env.NODE_ENV !== "production" ? {
  typeClue: PropTypes.oneOf(_keys(CONTENT_TYPE)),
  question: PropTypes.string,
  ...ValidateButton.propTypes
} : {};

/*
 * Loading
 */

const LoadingLayout = ({
  popinError
}) => /*#__PURE__*/React.createElement("div", {
  className: style.loading
}, popinError ? /*#__PURE__*/React.createElement(CMPopin, popinError) : /*#__PURE__*/React.createElement(Loader, null));
LoadingLayout.propTypes = process.env.NODE_ENV !== "production" ? {
  popinError: PropTypes.shape(CMPopin.propTypes)
} : {};
const LoadedLayout = ({
  question,
  step,
  ...props
}) => {
  return question ? /*#__PURE__*/React.createElement(ContentLayout, _extends({}, props, {
    question: question
  })) : /*#__PURE__*/React.createElement(LoadingLayout, props);
};
LoadedLayout.propTypes = process.env.NODE_ENV !== "production" ? {
  ...ContentLayout.propTypes,
  question: ContentLayout.propTypes.question
} : {};

/*
 * Errors
 */

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

/*
 * SlidesPlayer
 */

const SlidesPlayer = (props, context) => {
  const {
    header,
    step,
    buttons,
    showNewMedia = false,
    showReviewLesson = false
  } = props;
  const {
    skin
  } = context;
  const stepColor = _get('common.primary', skin);
  const mediaButton = _find({
    type: 'media'
  }, buttons) || {};
  const {
    onClick = _identity
  } = mediaButton;
  return /*#__PURE__*/React.createElement("div", {
    className: style.wrapper,
    "data-name": "slidesPlayer"
  }, header ? /*#__PURE__*/React.createElement(Header, header) : null, /*#__PURE__*/React.createElement("div", {
    className: style.contentProgression
  }, step ? /*#__PURE__*/React.createElement(Step, {
    step: step,
    color: stepColor
  }) : null, showNewMedia && !showReviewLesson ? /*#__PURE__*/React.createElement(NewMedia, {
    onClick: onClick,
    step: step
  }) : null, showReviewLesson && !showNewMedia ? /*#__PURE__*/React.createElement(ReviewLesson, {
    onClick: onClick
  }) : null, /*#__PURE__*/React.createElement(Content, props)), /*#__PURE__*/React.createElement(Footer, {
    buttons: buttons
  }));
};
SlidesPlayer.TYPE = CONTENT_TYPE;
SlidesPlayer.contextTypes = {
  translate: Provider.childContextTypes.translate,
  skin: Provider.childContextTypes.skin
};
SlidesPlayer.propTypes = process.env.NODE_ENV !== "production" ? {
  cta: ValidateButton.propTypes.cta,
  step: Step.propTypes.step,
  buttons: Footer.propTypes.buttons,
  header: PropTypes.shape(Header.propTypes),
  showNewMedia: PropTypes.bool,
  showReviewLesson: PropTypes.bool,
  backgroundUrl: SrcPropType,
  popinError: PropTypes.shape(CMPopin.propTypes)
} : {};
export default SlidesPlayer;
//# sourceMappingURL=index.js.map