"use strict";

exports.__esModule = true;
exports.default = void 0;
var _isNil2 = _interopRequireDefault(require("lodash/fp/isNil"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _markdownToJsx = _interopRequireDefault(require("markdown-to-jsx"));
var _provider = _interopRequireDefault(require("../../atom/provider"));
var _tag = _interopRequireDefault(require("../../atom/tag"));
var _select = _interopRequireWildcard(require("../../atom/select"));
var _buttonLinkIcon = _interopRequireDefault(require("../../atom/button-link-icon"));
var _icon = _interopRequireDefault(require("../../atom/icon"));
var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
var _allCourses = _interopRequireDefault(require("../skill-detail/all-courses"));
var _playlistDetailCover = _interopRequireDefault(require("../../molecule/playlist-detail-cover"));
var _skillDetail = require("../skill-detail");
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 PlaylistDetail = (props, context) => {
  const {
    title,
    coverImages,
    playlistRef,
    description,
    ongoingCoursesAvailable,
    playlistCourses,
    filters,
    sorting,
    onBackClick,
    onContinueLearningClick,
    search,
    bannerMicrolearning = {}
  } = props;
  const descriptionRef = (0, _react.useRef)(null);
  const {
    translate
  } = context;
  const {
    action: bannerMicrolearningAction,
    oldSwitchValue
  } = bannerMicrolearning;
  const [isDescriptionTruncated, setIsDescriptionTruncated] = (0, _react.useState)(false);
  const [showMore, setShowMore] = (0, _react.useState)(false);
  const handleShowMore = (0, _react.useCallback)(() => setShowMore(!showMore), [setShowMore, showMore]);
  (0, _react.useEffect)(() => {
    if (descriptionRef.current) {
      const {
        clientHeight = 0,
        scrollHeight = 0
      } = descriptionRef.current;
      setIsDescriptionTruncated(scrollHeight > clientHeight);
    }
  }, [description]);
  const Description = (0, _react.useCallback)(() => {
    return /*#__PURE__*/_react.default.createElement("div", {
      ref: descriptionRef,
      className: (0, _classnames.default)(_style.default.description, !showMore && _style.default.truncate)
    }, /*#__PURE__*/_react.default.createElement(_markdownToJsx.default, null, description));
  }, [showMore, description]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.backgroundContainer
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.container,
    "data-name": playlistRef
  }, !(0, _isNil2.default)(onBackClick) ? /*#__PURE__*/_react.default.createElement(_buttonLinkIcon.default, {
    faIcon: "arrow-left",
    "data-name": "back-button",
    "aria-label": translate('back'),
    onClick: onBackClick,
    className: _style.default.backButton,
    tooltipPlacement: "right"
  }) : null, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.ctaContainer
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.coverWrapper
  }, /*#__PURE__*/_react.default.createElement(_playlistDetailCover.default, {
    images: coverImages
  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_tag.default, {
    label: translate('playlist')
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.title
  }, title), description ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.showMoreWrapper,
    onClick: handleShowMore
  }, translate(showMore ? 'Show less' : 'Show more'), /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: showMore ? 'chevron-up' : 'chevron-down',
    size: {
      faSize: 14,
      wrapperSize: 16
    }
  })) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.continueLearningButton
  }, /*#__PURE__*/_react.default.createElement(_skillDetail.ContinueLearningButton, {
    ongoingCoursesAvailable: ongoingCoursesAvailable,
    onClick: onContinueLearningClick
  })))), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
    content: playlistCourses,
    filters: filters,
    sorting: sorting,
    bannerMicrolearning: bannerMicrolearningAction ? {
      type: 'playlist',
      action: bannerMicrolearningAction,
      oldSwitchValue
    } : {},
    search: search
  })));
};
PlaylistDetail.contextTypes = {
  skin: _provider.default.childContextTypes.skin,
  translate: _provider.default.childContextTypes.translate
};
PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
  title: _propTypes.default.string.isRequired,
  coverImages: _playlistDetailCover.default.propTypes.images,
  playlistRef: _propTypes.default.string.isRequired,
  description: _propTypes.default.string,
  ongoingCoursesAvailable: _propTypes.default.bool,
  playlistCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
  filters: _propTypes.default.shape({
    onChange: _propTypes.default.func,
    options: _propTypes.default.arrayOf(_propTypes.default.shape(_select.SelectOptionPropTypes))
  }),
  sorting: _propTypes.default.shape(_select.default.propTypes),
  search: _propTypes.default.shape({
    oldValue: _propTypes.default.string,
    onChange: _propTypes.default.func
  }),
  onBackClick: _propTypes.default.func,
  onContinueLearningClick: _propTypes.default.func,
  bannerMicrolearning: _propTypes.default.shape({
    action: _propTypes.default.func,
    oldSwitchValue: _propTypes.default.bool
  })
} : {};
var _default = exports.default = PlaylistDetail;
//# sourceMappingURL=index.js.map