import React from 'react';
import PropTypes from 'prop-types';
import get from 'lodash/fp/get';
import getOr from 'lodash/fp/getOr';
import classnames from 'classnames';
import { NovaSolidSynchronizeSynchronize3 as SyncIcon } from '@coorpacademy/nova-icons';
import VideoPlayer from '../video-player';
import Picture from '../../atom/picture';
import style from './style.css';
const Preview = ({
  image,
  video
}) => {
  const mimeType = get('mimeType', video);
  const id = get('id', video);
  const jwpOptions = get('jwpOptions', video);
  if (id) {
    return /*#__PURE__*/React.createElement(VideoPlayer, {
      mimeType: mimeType,
      id: id,
      width: "380px",
      height: "250px"
    });
  } else if (jwpOptions) {
    return /*#__PURE__*/React.createElement(VideoPlayer, video);
  } else {
    return /*#__PURE__*/React.createElement(Picture, {
      className: style.image,
      src: image
    });
  }
};
Preview.propTypes = process.env.NODE_ENV !== "production" ? {
  image: Picture.propTypes.src,
  video: PropTypes.shape(VideoPlayer.propTypes)
} : {};
class DisciplineHeader extends React.Component {
  static contextTypes = {
    translate: PropTypes.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: getOr(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.showMoreHidden : style.showMore;
    return /*#__PURE__*/React.createElement("div", {
      "data-name": "disciplineHeader",
      className: style.wrapper
    }, hasMediaContent ? /*#__PURE__*/React.createElement("div", {
      className: style.imgWrapper,
      ref: this.setHandle
    }, /*#__PURE__*/React.createElement(Preview, {
      image: image,
      video: video
    })) : null, /*#__PURE__*/React.createElement("div", {
      className: style.courseWrapper
    }, /*#__PURE__*/React.createElement("div", {
      id: "discipline-summary",
      className: fullDisplay ? style.courseTextWrapperFull : style.courseTextWrapperShort,
      ref: this.setHandle
    }, /*#__PURE__*/React.createElement("div", {
      "data-name": "title",
      className: classnames(style.title, style.innerHTML)
      // eslint-disable-next-line react/no-danger
      ,
      dangerouslySetInnerHTML: {
        __html: title
      }
    }), /*#__PURE__*/React.createElement("div", {
      className: style.innerHTML
      // eslint-disable-next-line react/no-danger
      ,
      dangerouslySetInnerHTML: {
        __html: description
      }
    })), /*#__PURE__*/React.createElement("div", {
      className: courseSeeMoreButtonStyle,
      onClick: this.handleToggleDisplay
    }, toggleLabel), lastUpdated ? /*#__PURE__*/React.createElement("div", {
      className: classnames(style.lastUpdatedWrapper, shortCourseText ? style.lastUpdatedWrapperShort : null)
    }, /*#__PURE__*/React.createElement(SyncIcon, {
      className: style.syncIcon
    }), /*#__PURE__*/React.createElement("div", {
      className: classnames(style.lastUpdatedText, style.innerHTML)
      // eslint-disable-next-line react/no-danger
      ,
      dangerouslySetInnerHTML: {
        __html: lastUpdated
      }
    })) : null));
  }
}
DisciplineHeader.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.string,
  description: PropTypes.string,
  image: Preview.propTypes.image,
  video: Preview.propTypes.video,
  lastUpdated: PropTypes.string
} : {};
export default DisciplineHeader;
//# sourceMappingURL=index.js.map