"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _get = _interopRequireDefault(require("lodash/fp/get"));
var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
var _classnames = _interopRequireDefault(require("classnames"));
var _novaIcons = require("@coorpacademy/nova-icons");
var _videoPlayer = _interopRequireDefault(require("../video-player"));
var _picture = _interopRequireDefault(require("../../atom/picture"));
var _style = _interopRequireDefault(require("./style.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const Preview = ({
  image,
  video
}) => {
  const mimeType = (0, _get.default)('mimeType', video);
  const id = (0, _get.default)('id', video);
  const jwpOptions = (0, _get.default)('jwpOptions', video);
  if (id) {
    return /*#__PURE__*/_react.default.createElement(_videoPlayer.default, {
      mimeType: mimeType,
      id: id,
      width: "380px",
      height: "250px"
    });
  } else if (jwpOptions) {
    return /*#__PURE__*/_react.default.createElement(_videoPlayer.default, video);
  } else {
    return /*#__PURE__*/_react.default.createElement(_picture.default, {
      className: _style.default.image,
      src: image
    });
  }
};
Preview.propTypes = process.env.NODE_ENV !== "production" ? {
  image: _picture.default.propTypes.src,
  video: _propTypes.default.shape(_videoPlayer.default.propTypes)
} : {};
class DisciplineHeader extends _react.default.Component {
  static contextTypes = {
    translate: _propTypes.default.func
  };
  constructor(props) {
    super(props);
    this.state = {
      fullDisplay: false,
      scrollHeightShowMore: 0
    };
    this.handleToggleDisplay = this.handleToggleDisplay.bind(this);
    this.setHandle = this.setHandle.bind(this);
  }
  handleToggleDisplay() {
    this.setState(prevState => ({
      fullDisplay: !prevState.fullDisplay
    }));
  }
  setHandle() {
    const el = document.getElementById('discipline-summary');
    this.setState({
      scrollHeightShowMore: (0, _getOr.default)(0, 'scrollHeight', el)
    });
  }
  render() {
    const {
      image,
      title,
      description,
      video,
      lastUpdated
    } = this.props;
    const {
      fullDisplay,
      scrollHeightShowMore
    } = this.state;
    const {
      translate
    } = this.context;
    const maxHeightCourseInfos = 210;
    const hasMediaContent = image || video;
    const toggleLabel = fullDisplay ? translate('See less') : translate('Show more');
    const shortCourseText = scrollHeightShowMore <= maxHeightCourseInfos;
    const courseSeeMoreButtonStyle = shortCourseText ? _style.default.showMoreHidden : _style.default.showMore;
    return /*#__PURE__*/_react.default.createElement("div", {
      "data-name": "disciplineHeader",
      className: _style.default.wrapper
    }, hasMediaContent ? /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.imgWrapper,
      ref: this.setHandle
    }, /*#__PURE__*/_react.default.createElement(Preview, {
      image: image,
      video: video
    })) : null, /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.courseWrapper
    }, /*#__PURE__*/_react.default.createElement("div", {
      id: "discipline-summary",
      className: fullDisplay ? _style.default.courseTextWrapperFull : _style.default.courseTextWrapperShort,
      ref: this.setHandle
    }, /*#__PURE__*/_react.default.createElement("div", {
      "data-name": "title",
      className: (0, _classnames.default)(_style.default.title, _style.default.innerHTML)
      // eslint-disable-next-line react/no-danger
      ,
      dangerouslySetInnerHTML: {
        __html: title
      }
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.innerHTML
      // eslint-disable-next-line react/no-danger
      ,
      dangerouslySetInnerHTML: {
        __html: description
      }
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: courseSeeMoreButtonStyle,
      onClick: this.handleToggleDisplay
    }, toggleLabel), lastUpdated ? /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames.default)(_style.default.lastUpdatedWrapper, shortCourseText ? _style.default.lastUpdatedWrapperShort : null)
    }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidSynchronizeSynchronize3, {
      className: _style.default.syncIcon
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames.default)(_style.default.lastUpdatedText, _style.default.innerHTML)
      // eslint-disable-next-line react/no-danger
      ,
      dangerouslySetInnerHTML: {
        __html: lastUpdated
      }
    })) : null));
  }
}
DisciplineHeader.propTypes = process.env.NODE_ENV !== "production" ? {
  title: _propTypes.default.string,
  description: _propTypes.default.string,
  image: Preview.propTypes.image,
  video: Preview.propTypes.video,
  lastUpdated: _propTypes.default.string
} : {};
var _default = exports.default = DisciplineHeader;
//# sourceMappingURL=index.js.map