import _pick from "lodash/fp/pick";
import _assign from "lodash/fp/assign";
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, { useEffect, useMemo, useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { convert } from 'css-color-function';
import BaseModal from '../base-modal';
import ListItem from '../../organism/list-item';
import ButtonLink from '../../atom/button-link';
import Loader from '../../atom/loader';
import Provider from '../../atom/provider';
import { SelectOptionPropTypes } from '../../atom/select';
import SearchForm from '../search-form';
import searchValueIncluded from '../../util/search-value-included';
import { COLORS } from '../../variables/colors';
import style from './style.css';
const FilterButton = props => {
  const {
    active,
    filter,
    itemTotal,
    onClick
  } = props;
  const primarySkinColor = COLORS.cm_primary_blue;
  const Content = useCallback(() => /*#__PURE__*/React.createElement("div", null, filter, /*#__PURE__*/React.createElement("span", {
    className: active ? style.skillFilterNumber : style.skillFilterNumberInActive,
    style: {
      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : '#EAEAEB',
      color: active ? primarySkinColor : '#515161'
    }
  }, itemTotal)), [filter, itemTotal, active, primarySkinColor]);
  const buttonProps = {
    customStyle: {
      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : 'transparent',
      color: active ? primarySkinColor : '#9999A8',
      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
      width: 'fit-content'
    },
    onClick,
    content: /*#__PURE__*/React.createElement(Content, null),
    'data-name': 'change-skill-focus-button'
  };
  return /*#__PURE__*/React.createElement(ButtonLink, buttonProps);
};
FilterButton.propTypes = process.env.NODE_ENV !== "production" ? {
  active: PropTypes.bool,
  filter: PropTypes.string,
  itemTotal: PropTypes.number,
  onClick: PropTypes.func
} : {};
const LearningPriorityModal = (props, context) => {
  const {
    priorities,
    preselected,
    isOpen,
    isLoading,
    filters,
    onCancel,
    onAdd,
    onClose
  } = props;
  const {
    translate
  } = context;
  const [selectedPriority, setSelectedPriority] = useState('');
  const [selectedPriorityType, setSelectedPriorityType] = useState('');
  const [searchValue, setSearchValue] = useState('');
  const [filterValue, setFilterValue] = useState('all');
  const [searchResults, setSearchResults] = useState(priorities);
  const handleCancel = useCallback(() => {
    setSelectedPriority('');
    setSelectedPriorityType('');
    onCancel();
  }, [setSelectedPriority, setSelectedPriorityType, onCancel]);
  const handleClose = useCallback(() => {
    setSelectedPriority('');
    setSelectedPriorityType('');
    onClose();
  }, [setSelectedPriority, setSelectedPriorityType, onClose]);
  const handleSearch = useCallback(value => {
    setSearchValue(value);
    setSearchResults(priorities.filter(priority => searchValueIncluded(priority.title, value)));
  }, [priorities, setSearchValue, setSearchResults]);
  const handleSearchReset = useCallback(() => {
    setSearchValue('');
    setSearchResults(priorities);
  }, [priorities, setSearchValue, setSearchResults]);
  useEffect(() => {
    setSearchResults(priorities);
  }, [priorities]);
  const priorityList = useMemo(() => {
    return searchResults.map(priority => {
      const isPreSelectedPriority = preselected.some(selected => selected === priority.priorityRef);
      return _assign({
        selected: isPreSelectedPriority,
        disabled: isPreSelectedPriority
      }, _pick(['title', 'priorityRef', 'type', 'courses'], priority));
    });
  }, [searchResults, preselected]);
  const footer = useMemo(() => {
    return {
      cancelButton: {
        onCancel: handleCancel,
        label: translate('cancel')
      },
      confirmButton: {
        onConfirm: () => {
          onAdd(selectedPriority, selectedPriorityType);
          setSelectedPriority('');
          setSelectedPriorityType('');
          onClose();
        },
        label: translate('add'),
        iconName: 'plus',
        disabled: isLoading || !selectedPriority,
        color: COLORS.cm_primary_blue
      }
    };
  }, [handleCancel, setSelectedPriority, setSelectedPriorityType, onAdd, onClose, translate, selectedPriority, selectedPriorityType, isLoading]);
  if (!isLoading && !priorities || !isOpen) return null;
  return /*#__PURE__*/React.createElement(BaseModal, {
    title: translate('learning_priority_modal_title'),
    description: translate('learning_priority_modal_description'),
    isOpen: isOpen,
    onClose: handleClose,
    footer: footer
  }, /*#__PURE__*/React.createElement("div", {
    className: style.LearningPriorityContainer
  }, isLoading ? /*#__PURE__*/React.createElement("div", {
    className: style.loaderContainer
  }, /*#__PURE__*/React.createElement(Loader, {
    className: style.loader,
    theme: "coorpmanager"
  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: style.searchWrapper
  }, /*#__PURE__*/React.createElement(SearchForm, {
    search: {
      placeholder: translate('search_priority_place_holder'),
      value: searchValue,
      onChange: handleSearch
    },
    onReset: handleSearchReset
  })), /*#__PURE__*/React.createElement("div", {
    className: style.filterWrapper
  }, searchResults.length > 0 ? filters.map((filter, index) => {
    const {
      name,
      value,
      count
    } = filter;
    function handleChange() {
      setFilterValue(value);
      handleSearchReset();
    }
    if (count === 0) return null;
    return /*#__PURE__*/React.createElement("div", {
      key: index,
      className: style.filterButtonWrapper
    }, /*#__PURE__*/React.createElement(FilterButton, {
      active: filterValue === value,
      filter: name,
      onClick: handleChange,
      itemTotal: count
    }));
  }) : null), /*#__PURE__*/React.createElement("div", {
    className: style.priorityListWrapper
  }, priorityList.map(priority => {
    const {
      title,
      priorityRef,
      courses = null,
      type,
      selected,
      disabled
    } = priority;
    function handlePriorityClick() {
      if (selectedPriority === priorityRef) {
        setSelectedPriority('');
        setSelectedPriorityType('');
        return;
      }
      setSelectedPriority(priorityRef);
      setSelectedPriorityType(type);
    }
    if (filterValue !== 'all' && type !== filterValue || !type || !title) return null;
    return /*#__PURE__*/React.createElement(ListItem, _extends({}, courses !== null ? {
      subtitle: `${courses} ${translate('courses')}`
    } : {}, {
      title: title,
      selected: selected || selectedPriority === priorityRef,
      selectedColor: COLORS.cm_primary_blue,
      disabled: disabled,
      onClick: handlePriorityClick,
      tags: [{
        label: type,
        type: 'default'
      }],
      key: priorityRef,
      backgroundColor: "skin"
    }));
  })))));
};
LearningPriorityModal.contextTypes = {
  translate: Provider.childContextTypes.translate
};
LearningPriorityModal.propTypes = process.env.NODE_ENV !== "production" ? {
  priorities: PropTypes.arrayOf(PropTypes.shape({
    priorityRef: PropTypes.string,
    title: PropTypes.string,
    courses: PropTypes.number,
    type: PropTypes.oneOf(['skill', 'playlist', 'certificate'])
  })),
  preselected: PropTypes.arrayOf(PropTypes.string),
  isOpen: PropTypes.bool,
  isLoading: PropTypes.bool,
  filters: PropTypes.arrayOf(PropTypes.shape({
    ...SelectOptionPropTypes,
    count: PropTypes.number
  })),
  onCancel: PropTypes.func,
  onAdd: PropTypes.func,
  onClose: PropTypes.func
} : {};
export default LearningPriorityModal;
//# sourceMappingURL=index.js.map