import _isNil from "lodash/fp/isNil";
import React, { useCallback, useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Markdown from 'markdown-to-jsx';
import Provider from '../../atom/provider';
import Tag from '../../atom/tag';
import Select, { SelectOptionPropTypes } from '../../atom/select';
import ButtonLinkIcon from '../../atom/button-link-icon';
import Icon from '../../atom/icon';
import CardsGrid from '../../organism/cards-grid';
import AllCourses from '../skill-detail/all-courses';
import PlaylistDetailCover from '../../molecule/playlist-detail-cover';
import { ContinueLearningButton } from '../skill-detail';
import style from './style.css';
const PlaylistDetail = (props, context) => {
  const {
    title,
    coverImages,
    playlistRef,
    description,
    ongoingCoursesAvailable,
    playlistCourses,
    filters,
    sorting,
    onBackClick,
    onContinueLearningClick,
    search,
    bannerMicrolearning = {}
  } = props;
  const descriptionRef = useRef(null);
  const {
    translate
  } = context;
  const {
    action: bannerMicrolearningAction,
    oldSwitchValue
  } = bannerMicrolearning;
  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);
  const [showMore, setShowMore] = useState(false);
  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
  useEffect(() => {
    if (descriptionRef.current) {
      const {
        clientHeight = 0,
        scrollHeight = 0
      } = descriptionRef.current;
      setIsDescriptionTruncated(scrollHeight > clientHeight);
    }
  }, [description]);
  const Description = useCallback(() => {
    return /*#__PURE__*/React.createElement("div", {
      ref: descriptionRef,
      className: classnames(style.description, !showMore && style.truncate)
    }, /*#__PURE__*/React.createElement(Markdown, null, description));
  }, [showMore, description]);
  return /*#__PURE__*/React.createElement("div", {
    className: style.backgroundContainer
  }, /*#__PURE__*/React.createElement("div", {
    className: style.container,
    "data-name": playlistRef
  }, !_isNil(onBackClick) ? /*#__PURE__*/React.createElement(ButtonLinkIcon, {
    faIcon: "arrow-left",
    "data-name": "back-button",
    "aria-label": translate('back'),
    onClick: onBackClick,
    className: style.backButton,
    tooltipPlacement: "right"
  }) : null, /*#__PURE__*/React.createElement("div", {
    className: style.ctaContainer
  }, /*#__PURE__*/React.createElement("div", {
    className: style.coverWrapper
  }, /*#__PURE__*/React.createElement(PlaylistDetailCover, {
    images: coverImages
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tag, {
    label: translate('playlist')
  }), /*#__PURE__*/React.createElement("div", {
    className: style.title
  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/React.createElement("div", {
    className: style.showMoreWrapper,
    onClick: handleShowMore
  }, translate(showMore ? 'Show less' : 'Show more'), /*#__PURE__*/React.createElement(Icon, {
    iconName: showMore ? 'chevron-up' : 'chevron-down',
    size: {
      faSize: 14,
      wrapperSize: 16
    }
  })) : null) : null, /*#__PURE__*/React.createElement("div", {
    className: style.continueLearningButton
  }, /*#__PURE__*/React.createElement(ContinueLearningButton, {
    ongoingCoursesAvailable: ongoingCoursesAvailable,
    onClick: onContinueLearningClick
  })))), /*#__PURE__*/React.createElement(AllCourses, {
    content: playlistCourses,
    filters: filters,
    sorting: sorting,
    bannerMicrolearning: bannerMicrolearningAction ? {
      type: 'playlist',
      action: bannerMicrolearningAction,
      oldSwitchValue
    } : {},
    search: search
  })));
};
PlaylistDetail.contextTypes = {
  skin: Provider.childContextTypes.skin,
  translate: Provider.childContextTypes.translate
};
PlaylistDetail.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.string.isRequired,
  coverImages: PlaylistDetailCover.propTypes.images,
  playlistRef: PropTypes.string.isRequired,
  description: PropTypes.string,
  ongoingCoursesAvailable: PropTypes.bool,
  playlistCourses: PropTypes.shape(CardsGrid.propTypes),
  filters: PropTypes.shape({
    onChange: PropTypes.func,
    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))
  }),
  sorting: PropTypes.shape(Select.propTypes),
  search: PropTypes.shape({
    oldValue: PropTypes.string,
    onChange: PropTypes.func
  }),
  onBackClick: PropTypes.func,
  onContinueLearningClick: PropTypes.func,
  bannerMicrolearning: PropTypes.shape({
    action: PropTypes.func,
    oldSwitchValue: PropTypes.bool
  })
} : {};
export default PlaylistDetail;
//# sourceMappingURL=index.js.map