"use strict";

exports.__esModule = true;
exports.useChoices = exports.default = void 0;
var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
var _keys2 = _interopRequireDefault(require("lodash/fp/keys"));
var _set2 = _interopRequireDefault(require("lodash/fp/set"));
var _get2 = _interopRequireDefault(require("lodash/fp/get"));
var _filter2 = _interopRequireDefault(require("lodash/fp/filter"));
var _join2 = _interopRequireDefault(require("lodash/fp/join"));
var _pipe2 = _interopRequireDefault(require("lodash/fp/pipe"));
var _map2 = _interopRequireDefault(require("lodash/fp/map"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _novaIcons = require("@coorpacademy/nova-icons");
var _titledCheckbox = _interopRequireDefault(require("../titled-checkbox"));
var _provider = _interopRequireDefault(require("../../atom/provider"));
var _inputCheckbox = _interopRequireDefault(require("../../atom/input-checkbox"));
var _getClassState = _interopRequireDefault(require("../../util/get-class-state"));
var _style = _interopRequireDefault(require("./style.css"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const themeStyle = {
  setup: _style.default.setup,
  cockpit: _style.default.cockpit,
  sidebar: _style.default.sidebar,
  coorpmanager: _style.default.coorpmanager
};
const useChoices = options => {
  const choicesRef = {
    current: options
  };
  const getChoices = () => {
    return choicesRef.current;
  };
  const setChoices = choice => {
    const choices = (0, _set2.default)(`[${choice.i}].selected`, !choice.selected, getChoices());
    choicesRef.current = choices.filter(c => c.selected);
  };
  return [getChoices, setChoices];
};
exports.useChoices = useChoices;
const CMMultipleView = ({
  multiple,
  choice,
  onChange
}) => {
  const handleChange = (0, _react.useCallback)(() => {
    return onChange(choice);
  }, [onChange, choice]);
  return multiple ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.item
  }, /*#__PURE__*/_react.default.createElement(_inputCheckbox.default, {
    titleStyle: "inherit",
    checked: choice.selected,
    onChange: handleChange,
    noLabelMargins: true,
    title: choice.name
  })) : /*#__PURE__*/_react.default.createElement("span", {
    className: _style.default.item,
    title: choice.name,
    "data-name": `${choice.name}-language`
  }, choice.name);
};
const SelectMultiple = ({
  title,
  options,
  theme,
  placeholder,
  description,
  hint,
  multiple,
  onChange,
  onError,
  modified = false,
  error = '',
  disabled = false
}, {
  skin
}) => {
  const [isOpened, updateIsOpened] = (0, _react.useState)(false);
  const [getChoices, setChoices] = useChoices(options);
  const nodeRef = (0, _react.useRef)(null);
  const defaultColor = (0, _get2.default)('common.primary', skin);
  const black = (0, _get2.default)('common.black', skin);
  const handleOnClick = (0, _react.useCallback)(e => {
    if (disabled) return;
    e.preventDefault();
    e.stopPropagation();
    updateIsOpened(prev => !prev);
  }, [disabled]);
  const closeHandle = (0, _react.useCallback)(e => {
    if (nodeRef && nodeRef.current && !nodeRef.current.contains(e.target)) {
      updateIsOpened(false);
    }
  }, []);
  const handleChange = (0, _react.useCallback)(choice => {
    // if multiple prop is turned on
    // we return all selected choices
    if (multiple) {
      setChoices(choice);
      return onChange(getChoices());
    }
    updateIsOpened(false);
    return onChange(choice);
  }, [multiple, onChange, setChoices, getChoices]);
  (0, _react.useEffect)(() => {
    document.addEventListener('click', closeHandle);
    document.addEventListener('touchstart', closeHandle);
    return () => {
      document.removeEventListener('click', closeHandle);
      document.removeEventListener('touchstart', closeHandle);
    };
  }, [closeHandle]);
  const isCMTheme = theme === 'coorpmanager';
  const handleOnClickOnListElement = choice => () => handleChange(choice);
  const lines = _map2.default.convert({
    cap: false
  })((choice, i) => {
    return /*#__PURE__*/_react.default.createElement("li", {
      key: i,
      className: _style.default.choice,
      onClick: isCMTheme && !multiple ? handleOnClickOnListElement({
        ...choice,
        i
      }) : null
    }, isCMTheme ? /*#__PURE__*/_react.default.createElement(CMMultipleView, {
      multiple: multiple,
      choice: {
        ...choice,
        i
      },
      onChange: handleChange
    }) : /*#__PURE__*/_react.default.createElement(_titledCheckbox.default, {
      onToggle: handleChange,
      choice: {
        ...choice,
        i
      },
      background: defaultColor
    }));
  }, options);
  const selection = (0, _pipe2.default)((0, _filter2.default)({
    selected: true
  }), (0, _map2.default)('name'), (0, _join2.default)(', '))(options);
  const isActive = isOpened === true;
  const titleView = title ? /*#__PURE__*/_react.default.createElement("span", {
    className: (0, _classnames.default)(_style.default.title, isCMTheme && selection && _style.default.titleWithSelection, isCMTheme && (0, _isEmpty2.default)(selection) && _style.default.noValue, isActive && _style.default.active)
  }, title, description && isCMTheme ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.infoIconWrapper
  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyInformationIcon, {
    className: _style.default.infoIcon
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.descriptionLabel
  }, description)) : null) : null;
  const hintView = isCMTheme ? /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(_style.default.hint, isActive && _style.default.hideHint)
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: error || hint
    }
  }) : null;
  const mainClass = theme ? themeStyle[theme] : _style.default.defaultStyle;
  const showPlaceholder = isCMTheme && isActive;
  const behaviourClassName = (0, _getClassState.default)(_style.default.defaultStyle, _style.default.modified, _style.default.error, modified, error);
  const errorIconView = error ? /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusClose, {
    onClick: onError,
    className: _style.default.errorIcon
  }) : null;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(mainClass, behaviourClassName, disabled && _style.default.disabled),
    ref: nodeRef
  }, /*#__PURE__*/_react.default.createElement("label", null, !isCMTheme && titleView, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.select,
    title: selection || placeholder,
    "data-name": `select-languages`,
    onClick: handleOnClick
  }, isCMTheme && titleView, /*#__PURE__*/_react.default.createElement("span", {
    className: (0, _classnames.default)(_style.default.selection, isCMTheme && (0, _isEmpty2.default)(selection) && _style.default.noselection)
  }, selection || !isCMTheme || showPlaceholder && placeholder || null), isCMTheme ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.iconsWrapper
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.flex
  }, errorIconView), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(_style.default.flex, isActive && _style.default.clicked)
  }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowDown, {
    style: {
      color: black
    },
    className: (0, _classnames.default)(_style.default.arrow, {
      [_style.default.down]: isActive
    })
  }))) : /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowDown, {
    style: {
      color: black
    },
    className: (0, _classnames.default)(_style.default.arrow, {
      [_style.default.down]: isActive
    })
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(_style.default.choices, isActive && _style.default.activeChoices)
  }, /*#__PURE__*/_react.default.createElement("ul", {
    className: _style.default.list
  }, lines))), !isCMTheme ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.description
  }, description) : null, hintView);
};
SelectMultiple.contextTypes = {
  skin: _provider.default.childContextTypes.skin
};
CMMultipleView.propTypes = process.env.NODE_ENV !== "production" ? {
  multiple: _propTypes.default.bool,
  choice: _titledCheckbox.default.propTypes.choice,
  onChange: _propTypes.default.func
} : {};
SelectMultiple.propTypes = process.env.NODE_ENV !== "production" ? {
  title: _propTypes.default.string,
  placeholder: _propTypes.default.string,
  description: _propTypes.default.string,
  hint: _propTypes.default.string,
  options: _propTypes.default.arrayOf(_titledCheckbox.default.propTypes.choice),
  onChange: _propTypes.default.func,
  onError: _propTypes.default.func,
  multiple: _propTypes.default.bool,
  modified: _propTypes.default.bool,
  disabled: _propTypes.default.bool,
  error: _propTypes.default.string,
  theme: _propTypes.default.oneOf((0, _keys2.default)(themeStyle))
} : {};
var _default = exports.default = SelectMultiple;
//# sourceMappingURL=index.js.map