import React, { useCallback, useMemo } from 'react';
import BaseModal from '../../molecule/base-modal';
import ListItems from '../list-items';
import MultiFilterPanel from '../../molecule/multi-filter-panel';
import Provider from '../../atom/provider';
import { COLORS } from '../../variables/colors';
import style from './style.css';
import propTypes from './types';
const ContentSkillModal = props => {
  const {
    contentList,
    filters,
    modal
  } = props;
  const {
    isOpen,
    onCancel,
    onConfirm,
    onClose
  } = modal;
  const handleCancel = useCallback(() => {
    onCancel();
  }, [onCancel]);
  const handleClose = useCallback(() => {
    onClose();
  }, [onClose]);
  const headerIcon = {
    name: 'circle-plus',
    color: COLORS.primary_600,
    backgroundColor: COLORS.primary_100
  };
  const footer = useMemo(() => ({
    cancelButton: {
      onCancel: handleCancel,
      label: 'Cancel'
    },
    confirmButton: {
      onConfirm,
      label: 'Add',
      iconName: 'plus',
      disabled: false,
      color: COLORS.cm_primary_blue
    }
  }), [handleCancel, onConfirm]);
  const baseModal = {
    title: 'Add content',
    description: 'Add courses, video, interactive and more to this skill',
    headerIcon,
    footer,
    isOpen,
    onClose: handleClose,
    customStyle: {
      padding: 0,
      height: '60vh',
      overflow: 'hidden'
    }
  };
  if (!isOpen) return null;
  return /*#__PURE__*/React.createElement(BaseModal, baseModal, /*#__PURE__*/React.createElement("div", {
    className: style.container
  }, /*#__PURE__*/React.createElement("div", {
    className: style.containerList
  }, /*#__PURE__*/React.createElement(ListItems, contentList)), /*#__PURE__*/React.createElement("div", {
    className: style.filtersContainer
  }, /*#__PURE__*/React.createElement(MultiFilterPanel, filters))));
};
ContentSkillModal.contextTypes = {
  translate: Provider.childContextTypes.translate
};
ContentSkillModal.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
export default ContentSkillModal;
//# sourceMappingURL=index.js.map