import _map from "lodash/fp/map";
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import Provider from '../../atom/provider';
import Title from '../../atom/title';
import Select from '../../atom/select';
import InputSwitch from '../../atom/input-switch';
import CertificationCard from '../../molecule/certification-card';
import style from './style.css';
const Certifications = (props, context) => {
  const {
    locales: {
      title,
      subtitle,
      tag,
      count
    },
    certifications,
    sorting
  } = props;
  const {
    translate
  } = context;
  const [showCompleted, setShowCompleted] = useState(true);
  const sortView = sorting !== undefined ? /*#__PURE__*/React.createElement("div", {
    "data-name": "choice"
  }, /*#__PURE__*/React.createElement(Select, _extends({}, sorting, {
    "aria-label": "All courses sort"
  }))) : null;
  const handleShowCompletedToggle = useCallback(() => {
    setShowCompleted(!showCompleted);
  }, [showCompleted, setShowCompleted]);
  return /*#__PURE__*/React.createElement("div", {
    className: style.backgroudnContainer
  }, /*#__PURE__*/React.createElement("div", {
    className: style.container,
    "data-name": "Certifications"
  }, /*#__PURE__*/React.createElement(Title, {
    title: title,
    subtitle: subtitle,
    type: "form-group",
    titleSize: "standard-light-weight",
    subtitleSize: "standard-without-margin",
    icon: {
      iconName: 'wreath-laurel',
      iconColor: '#B87A00',
      borderRadius: '12px',
      backgroundColor: '#FFEECC'
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: style.sortSectionWrapper
  }, /*#__PURE__*/React.createElement("div", {
    className: style.certificatesCount
  }, count), /*#__PURE__*/React.createElement("div", {
    className: style.sortSection
  }, /*#__PURE__*/React.createElement(InputSwitch, {
    id: 'show-completed-courses-switch',
    type: "switch",
    name: translate('show_completed'),
    title: translate('show_completed'),
    "aria-label": 'Show completed courses aria label',
    value: showCompleted,
    onChange: handleShowCompletedToggle
  }), sorting ? /*#__PURE__*/React.createElement("div", {
    className: style.sortWrapper
  }, translate('sort_by'), sortView) : null)), /*#__PURE__*/React.createElement("div", {
    className: style.certificateList
  }, _map(certification => {
    const {
      label,
      progress
    } = certification;
    if (!showCompleted && progress === 100) return null;
    return /*#__PURE__*/React.createElement("div", {
      key: label
    }, /*#__PURE__*/React.createElement(CertificationCard, _extends({}, certification, {
      locales: {
        ...certification.locales,
        tag
      }
    })));
  }, certifications))));
};
Certifications.contextTypes = {
  translate: Provider.childContextTypes.translate
};
Certifications.propTypes = process.env.NODE_ENV !== "production" ? {
  certifications: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
    goal: PropTypes.shape({
      title: PropTypes.string,
      condition: PropTypes.shape({
        nbDone: PropTypes.number
      })
    }),
    progress: PropTypes.number,
    imgUrl: PropTypes.string,
    onClick: PropTypes.func,
    locales: PropTypes.shape({
      conditionDescriptionProgress: PropTypes.string
    })
  })),
  locales: PropTypes.shape({
    title: PropTypes.string,
    subtitle: PropTypes.string,
    tag: PropTypes.string,
    count: PropTypes.string
  }),
  sorting: PropTypes.shape(Select.propTypes)
} : {};
export default Certifications;
//# sourceMappingURL=index.js.map