"use strict";

exports.__esModule = true;
exports.default = exports.SelectOptionPropTypes = exports.SelectOptionGroupPropTypes = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _concat = _interopRequireDefault(require("lodash/fp/concat"));
var _filter = _interopRequireDefault(require("lodash/fp/filter"));
var _find = _interopRequireDefault(require("lodash/fp/find"));
var _flatMapDeep = _interopRequireDefault(require("lodash/fp/flatMapDeep"));
var _get = _interopRequireDefault(require("lodash/fp/get"));
var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
var _includes = _interopRequireDefault(require("lodash/fp/includes"));
var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
var _keys = _interopRequireDefault(require("lodash/fp/keys"));
var _map = _interopRequireDefault(require("lodash/fp/map"));
var _size = _interopRequireDefault(require("lodash/fp/size"));
var _novaIcons = require("@coorpacademy/nova-icons");
var _provider = _interopRequireWildcard(require("../provider"));
var _getClassState = _interopRequireDefault(require("../../util/get-class-state"));
var _style = _interopRequireDefault(require("./style.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 _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); }
const themeStyle = {
  filter: _style.default.filter,
  invalid: _style.default.invalid,
  header: _style.default.header,
  mooc: _style.default.mooc,
  question: _style.default.question,
  sort: _style.default.sort,
  thematiques: _style.default.thematiques,
  player: _style.default.player,
  template: _style.default.template,
  skillDetail: _style.default.skillDetail,
  coorpmanager: null
};
const ArrowView = ({
  shouldRender,
  isArrowUp,
  ariaLabel,
  arrowClass,
  arrowColor
}) => {
  const props = (0, _react.useMemo)(() => ({
    ...(arrowColor & {
      color: arrowColor
    }),
    className: arrowClass
  }), [arrowClass, arrowColor]);
  if (shouldRender) {
    return isArrowUp ? /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowTop, _extends({}, props, {
      "data-testid": "select-arrow-up-icon"
    })) : /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowDown, _extends({}, props, {
      "data-testid": "select-arrow-down-icon"
    }));
  } else return null;
};
const Select = (props, legacyContext) => {
  const {
    name,
    options = [],
    optgroups = [],
    className,
    borderClassName,
    onChange,
    multiple = false,
    disabled,
    required,
    description,
    theme,
    modified = false,
    error = false,
    title: propTitle,
    'aria-label': ariaLabel,
    'aria-labelledby': ariaLabelledBy
  } = props;
  const skin = (0, _provider.GetSkinFromContext)(legacyContext);
  const title = (0, _react.useMemo)(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
  const [isArrowUp, setIsArrowUp] = (0, _react.useState)(false);
  const handleSelectOnFocus = (0, _react.useCallback)(() => setIsArrowUp(true), []);
  const handleSelectOnBlur = (0, _react.useCallback)(() => setIsArrowUp(false), []);
  const selectOption = (option, index) => {
    return /*#__PURE__*/_react.default.createElement("option", {
      key: index,
      value: option.value,
      className: _style.default.selectOption
    }, option.name);
  };
  const optionList = !(0, _isEmpty.default)(options) ? options.map((option, index) => selectOption(option, index)) : optgroups.map((optgroup, index) => {
    return /*#__PURE__*/_react.default.createElement("optgroup", {
      key: index,
      label: optgroup.label
    }, optgroup.options && optgroup.options.map((option, i) => selectOption(option, i)));
  });
  const titleView = title ? /*#__PURE__*/_react.default.createElement("span", {
    className: _style.default.title
  }, title) : null;
  const selected = (0, _react.useMemo)(() => multiple ? (0, _map.default)((0, _get.default)('value'), (0, _filter.default)({
    selected: true
  }, options)) : (0, _get.default)('value', (0, _find.default)({
    selected: true
  }, (0, _concat.default)(options, (0, _flatMapDeep.default)('options', optgroups)))), [multiple, options, optgroups]);
  const selectedLabel = (0, _react.useMemo)(() => multiple ? (0, _map.default)((0, _get.default)('name'), (0, _filter.default)({
    selected: true
  }, options)) : (0, _get.default)('name', (0, _find.default)({
    selected: true
  }, (0, _concat.default)(options, (0, _flatMapDeep.default)('options', optgroups)))), [multiple, options, optgroups]);
  const isSelectedInValidOption = (0, _react.useMemo)(() => theme === 'player' && (0, _getOr.default)(false, 'name', (0, _find.default)({
    validOption: false,
    selected: true
  }, options)), [options, theme]);
  const handleChange = (0, _react.useMemo)(() => multiple ? e => {
    setIsArrowUp(false);
    onChange((0, _map.default)((0, _get.default)('value'), e.target.selectedOptions));
  } : e => {
    setIsArrowUp(false);
    onChange(e.target.value);
  }, [onChange, multiple]);
  const black = (0, _react.useMemo)(() => (0, _getOr.default)('#14171A', 'common.black', skin), [skin]);
  const color = (0, _react.useMemo)(() => (0, _getOr.default)('#00B0FF', 'common.primary', skin), [skin]);
  const isThemeOneOfQuestionTemplateOrPlayer = (0, _react.useMemo)(() => (0, _includes.default)(theme, ['question', 'template', 'player']), [theme]);
  const shouldUseSkinFontColor = (0, _react.useMemo)(() => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer, [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]);
  const arrowColor = selected ? color : undefined;
  const behaviorClassName = (0, _react.useMemo)(() => (0, _getClassState.default)(_style.default.defaultStyle, _style.default.modified, _style.default.error, modified, error), [error, modified]);
  const composedClassName = (0, _react.useMemo)(() => (0, _classnames.default)(theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName, selected ? _style.default.selected : _style.default.unselected, className), [behaviorClassName, className, selected, theme]);
  const labelSize = (0, _react.useMemo)(() => (0, _size.default)(selectedLabel), [selectedLabel]);
  const isLongLabel = (0, _react.useMemo)(() => labelSize >= 65, [labelSize]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(composedClassName, theme === 'coorpmanager' ? _style.default.coorpmanager : null)
  }, /*#__PURE__*/_react.default.createElement("label", {
    "data-testid": "select-wrapper",
    "data-name": "select-wrapper",
    title: title,
    style: {
      ...(shouldUseSkinFontColor && {
        color
      })
    },
    className: _style.default.selectWrapper
  }, titleView, /*#__PURE__*/_react.default.createElement("span", {
    "data-testid": "select-span",
    "data-name": "select-span",
    className: (0, _classnames.default)(_style.default.selectSpan, (0, _includes.default)(theme, ['player', 'invalid', 'question', 'thematiques', 'template', 'skillDetail']) ? _style.default.noLabelCommon : null, borderClassName, isLongLabel ? _style.default.longLabel : null),
    style: {
      ...(shouldUseSkinFontColor && {
        color
      })
    }
  }, selectedLabel), /*#__PURE__*/_react.default.createElement(ArrowView, {
    shouldRender: !multiple,
    isArrowUp: isArrowUp,
    ariaLabel: ariaLabel,
    arrowClass: shouldUseSkinFontColor ? _style.default.selectedArrow : _style.default.arrow,
    arrowColor: isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black
  }), /*#__PURE__*/_react.default.createElement("select", _extends({}, ariaLabelledBy ? {
    'aria-labelledby': ariaLabelledBy
  } : {}, ariaLabel && !ariaLabelledBy ? {
    'aria-label': ariaLabel
  } : {}, ariaLabel ? {
    title: ariaLabel
  } : {}, {
    "data-name": "native-select",
    className: _style.default.selectBox,
    name: name,
    onChange: handleChange,
    value: selected,
    multiple: multiple,
    disabled: disabled,
    onClick: handleSelectOnFocus,
    onBlur: handleSelectOnBlur
    // onBlur does not handle completely an out of bounds click
    // ex: select is Opened and a click is done outside, cancelling the select
    // that doesn't count as a Blur, so an onMouseLeave is needed
    ,
    onMouseLeave: handleSelectOnBlur,
    "data-testid": "native-select"
  }), optionList)), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.description
  }, description));
};
const SelectOptionPropTypes = exports.SelectOptionPropTypes = {
  name: _propTypes.default.string.isRequired,
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  selected: _propTypes.default.bool,
  validOption: _propTypes.default.bool
};
const SelectOptionGroupPropTypes = exports.SelectOptionGroupPropTypes = {
  label: _propTypes.default.string.isRequired,
  options: _propTypes.default.arrayOf(_propTypes.default.shape(SelectOptionPropTypes))
};
Select.contextTypes = {
  skin: _provider.default.childContextTypes.skin
};
Select.propTypes = process.env.NODE_ENV !== "production" ? {
  title: _propTypes.default.string,
  name: _propTypes.default.string,
  className: _propTypes.default.string,
  borderClassName: _propTypes.default.string,
  disabled: _propTypes.default.bool,
  multiple: _propTypes.default.bool,
  description: _propTypes.default.string,
  required: _propTypes.default.bool,
  onChange: _propTypes.default.func,
  theme: _propTypes.default.oneOf((0, _keys.default)(themeStyle)),
  options: _propTypes.default.arrayOf(_propTypes.default.shape(SelectOptionPropTypes)),
  optgroups: _propTypes.default.arrayOf(_propTypes.default.shape(SelectOptionGroupPropTypes)),
  modified: _propTypes.default.bool,
  error: _propTypes.default.bool,
  'aria-label': _propTypes.default.string,
  'aria-labelledby': _propTypes.default.string
} : {};
var _default = exports.default = Select;
//# sourceMappingURL=index.js.map