import _isNil from "lodash/fp/isNil";
import _get from "lodash/fp/get";
import React, { useCallback, useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Markdown from 'markdown-to-jsx';
import { convert } from 'css-color-function';
import Provider from '../../atom/provider';
import ButtonLinkIcon from '../../atom/button-link-icon';
import Icon from '../../atom/icon';
import IconPreview from '../../molecule/icon-preview';
import ButtonLink from '../../atom/button-link';
import CardsGrid from '../../organism/cards-grid';
import { COLORS } from '../../variables/colors';
import { SelectOptionPropTypes } from '../../atom/select';
import AllCourses from './all-courses';
import style from './style.css';
export const ContinueLearningButton = (props, context) => {
  const {
    ongoingCoursesAvailable,
    onClick
  } = props;
  const {
    skin,
    translate
  } = context;
  const primarySkinColor = _get('common.primary', skin);
  return /*#__PURE__*/React.createElement(ButtonLink, {
    label: ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning'),
    type: "primary",
    customStyle: {
      width: 'fit-content',
      borderRadius: '12px',
      backgroundColor: primarySkinColor
    },
    hoverBackgroundColor: convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`),
    hoverColor: COLORS.white,
    icon: {
      position: 'left',
      faIcon: {
        name: 'play',
        color: COLORS.white,
        size: 14
      }
    },
    onClick: onClick
  });
};
ContinueLearningButton.contextTypes = {
  skin: Provider.childContextTypes.skin,
  translate: Provider.childContextTypes.translate
};
ContinueLearningButton.propTypes = process.env.NODE_ENV !== "production" ? {
  ongoingCoursesAvailable: PropTypes.bool,
  onClick: PropTypes.func
} : {};
const SkillDetail = (props, context) => {
  const {
    title,
    icon: {
      color: iconColor,
      name: iconName
    },
    skillRef,
    description,
    metrics = {},
    focused,
    availableForReview,
    ongoingCoursesAvailable,
    skillIncludedCourses,
    filters,
    onBackClick,
    onReviewClick,
    onContinueLearningClick,
    search,
    bannerMicrolearning
  } = props;
  const {
    score = 0,
    questionsToReview = 0,
    totalContents = 0
  } = metrics;
  const {
    translate
  } = context;
  const bannerMicrolearningAction = bannerMicrolearning?.action;
  const descriptionRef = useRef(null);
  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);
  const [showMore, setShowMore] = useState(false);
  const handleShowMore = useCallback(() => {
    setShowMore(!showMore);
  }, [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,
      "data-testid": "skill-description",
      className: classnames(style.description, !showMore && style.truncate)
    }, description ? /*#__PURE__*/React.createElement(Markdown, null, description) : null);
  }, [showMore, description]);
  const ProgressBar = useCallback(() => {
    if (typeof score !== 'number') return null;
    const progressBarColor = COLORS.cm_positive_500;
    const inlineProgressStyle = {
      backgroundColor: progressBarColor,
      width: `${score}%`
    };
    return /*#__PURE__*/React.createElement("div", {
      className: style.progressBarRow
    }, /*#__PURE__*/React.createElement("div", {
      className: style.progressBarWrapper
    }, /*#__PURE__*/React.createElement("div", {
      "data-name": "progress",
      className: style.progress,
      style: inlineProgressStyle,
      role: "progressbar",
      "aria-valuenow": score,
      "aria-valuemin": 0,
      "aria-valuemax": 100
    })), /*#__PURE__*/React.createElement("span", {
      className: style.progressInformationNumber
    }, score.toFixed(1), "%"));
  }, [score]);
  const hasDescription = Boolean(description && description.trim().length > 0);
  return /*#__PURE__*/React.createElement("div", {
    className: style.backgroundContainer
  }, /*#__PURE__*/React.createElement("div", {
    className: style.container,
    "data-name": skillRef
  }, /*#__PURE__*/React.createElement("div", {
    className: style.topSection
  }, !_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.mainSection
  }, /*#__PURE__*/React.createElement("div", {
    className: style.leftSide
  }, /*#__PURE__*/React.createElement(IconPreview, {
    icon: {
      name: iconName,
      color: iconColor
    },
    title: title,
    customStyle: {
      gap: 24,
      padding: '50px 49px 50px 50px'
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: style.rightSide
  }, focused ? /*#__PURE__*/React.createElement("div", {
    className: style.skillFocusBadge
  }, /*#__PURE__*/React.createElement(Icon, {
    iconName: "bullseye-arrow",
    backgroundColor: COLORS.purple_100,
    size: {
      faSize: 10,
      wrapperSize: 16
    }
  }), translate('skill_focus')) : /*#__PURE__*/React.createElement("div", {
    className: style.skillBadge
  }, /*#__PURE__*/React.createElement(Icon, {
    iconName: "shapes",
    backgroundColor: COLORS.cm_grey_100,
    size: {
      faSize: 10,
      wrapperSize: 16
    }
  }), translate('skill')), /*#__PURE__*/React.createElement("h2", {
    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
  }, showMore ? translate('Show less') : translate('Show more'), /*#__PURE__*/React.createElement(Icon, {
    iconName: showMore ? 'chevron-up' : 'chevron-down',
    size: {
      faSize: 14,
      wrapperSize: 14
    },
    customStyle: {
      padding: '8px'
    }
  })) : null), questionsToReview > 0 ? /*#__PURE__*/React.createElement("div", {
    className: style.skillInformation
  }, /*#__PURE__*/React.createElement("span", null, questionsToReview), "\xA0", translate('skill_chart_side_panel_questions_to_review')) : null, /*#__PURE__*/React.createElement("div", {
    className: classnames(style.progressContainer, !hasDescription && style.noDescriptionSpacing)
  }, /*#__PURE__*/React.createElement(ProgressBar, null)), /*#__PURE__*/React.createElement("div", {
    className: style.ctaWrapper
  }, /*#__PURE__*/React.createElement(ContinueLearningButton, {
    ongoingCoursesAvailable: ongoingCoursesAvailable,
    onClick: onContinueLearningClick
  }), /*#__PURE__*/React.createElement(ButtonLink, {
    type: "secondary",
    label: translate('review_this_skill'),
    disabled: !availableForReview,
    onClick: onReviewClick,
    icon: {
      position: 'left',
      faIcon: {
        name: 'rotate-right',
        color: COLORS.cm_grey_700,
        size: 14
      }
    },
    customStyle: {
      borderRadius: '12px',
      width: 'fit-content'
    }
  })))), /*#__PURE__*/React.createElement(AllCourses, {
    content: skillIncludedCourses,
    filters: filters,
    totalContents: totalContents,
    bannerMicrolearning: bannerMicrolearning && bannerMicrolearningAction ? {
      type: 'skill',
      action: bannerMicrolearningAction,
      oldSwitchValue: bannerMicrolearning.oldSwitchValue
    } : undefined,
    search: search
  })));
};
SkillDetail.contextTypes = {
  translate: Provider.childContextTypes.translate,
  skin: Provider.childContextTypes.skin
};
SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.string.isRequired,
  icon: PropTypes.shape({
    name: PropTypes.string,
    color: PropTypes.string
  }).isRequired,
  skillRef: PropTypes.string.isRequired,
  description: PropTypes.string,
  metrics: PropTypes.shape({
    score: PropTypes.number,
    questionsToReview: PropTypes.number,
    totalContents: PropTypes.number
  }),
  focused: PropTypes.bool,
  availableForReview: PropTypes.bool,
  ongoingCoursesAvailable: PropTypes.bool,
  skillIncludedCourses: PropTypes.shape(CardsGrid.propTypes),
  filters: PropTypes.shape({
    onChange: PropTypes.func,
    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))
  }),
  onBackClick: PropTypes.func,
  onReviewClick: PropTypes.func,
  onContinueLearningClick: PropTypes.func,
  search: PropTypes.shape({
    oldValue: PropTypes.string,
    onChange: PropTypes.func
  }),
  bannerMicrolearning: PropTypes.shape({
    action: PropTypes.func,
    oldSwitchValue: PropTypes.bool
  })
} : {};
export default SkillDetail;
//# sourceMappingURL=index.js.map