"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.SelectMultiple = exports.SelectOne = void 0;

var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));

var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));

var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));

var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _TextField = _interopRequireDefault(require("./TextField"));

var _Autocomplete = _interopRequireDefault(require("@material-ui/lab/Autocomplete"));

var _styles = require("@material-ui/core/styles");

// @flow
var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    root: {
      flexGrow: 1,
      height: 250
    },
    container: {
      width: '100%'
    },
    paper: {
      position: 'absolute',
      zIndex: 1,
      marginTop: theme.spacing(1),
      left: 0,
      right: 0
    },
    chip: {
      margin: theme.spacing(0.5, 0.25)
    },
    inputRoot: {
      flexWrap: 'wrap'
    },
    inputInput: {
      width: 'auto',
      flexGrow: 1
    },
    divider: {
      height: theme.spacing(2)
    }
  };
});

function _renderInput(inputProps) {
  var InputProps = inputProps.InputProps,
      classes = inputProps.classes,
      ref = inputProps.ref,
      other = (0, _objectWithoutProperties2.default)(inputProps, ["InputProps", "classes", "ref"]);
  return /*#__PURE__*/_react.default.createElement(_TextField.default, (0, _extends2.default)({
    InputProps: (0, _assign.default)({
      inputRef: ref,
      classes: {
        root: classes.inputRoot,
        input: classes.inputInput
      }
    }, InputProps)
  }, other));
}
/*:: type Props = {
  id: string,
  value: SelectableFieldValue,
  placeholder?: string,
  onChange: (value: SelectableFieldValue) => any,
  options: SelectOptions
}*/


/**
 * A multi-select field that allows the user to enter a value that is not on the
 * list. Allows the selection of non-string values from a list, but the labels
 * for each item must be unique for this to work reliably
 */
var SelectOne = function SelectOne(_ref) {
  var id = _ref.id,
      value = _ref.value,
      label = _ref.label,
      options = _ref.options,
      placeholder = _ref.placeholder,
      _onChange = _ref.onChange,
      props = (0, _objectWithoutProperties2.default)(_ref, ["id", "value", "label", "options", "placeholder", "onChange"]);
  var classes = useStyles();
  return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, (0, _extends2.default)({
    id: id,
    value: value,
    onChange: function onChange(e, v) {
      return _onChange(v);
    },
    options: (0, _map.default)(options).call(options, function (op) {
      return (0, _typeof2.default)(op) === 'object' ? op.label : op;
    }),
    renderInput: function renderInput(params) {
      return _renderInput((0, _assign.default)({}, params, {
        classes: classes,
        label: label,
        placeholder: placeholder
      }));
    }
  }, props));
};

exports.SelectOne = SelectOne;

var SelectMultiple = function SelectMultiple(_ref2) {
  var id = _ref2.id,
      value = _ref2.value,
      label = _ref2.label,
      options = _ref2.options,
      placeholder = _ref2.placeholder,
      _onChange2 = _ref2.onChange,
      props = (0, _objectWithoutProperties2.default)(_ref2, ["id", "value", "label", "options", "placeholder", "onChange"]);
  var classes = useStyles();
  return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, (0, _extends2.default)({
    id: id,
    multiple: true,
    freeSolo: true,
    value: value || [],
    onChange: function onChange(e, v) {
      return _onChange2(v);
    },
    options: (0, _map.default)(options).call(options, function (op) {
      return (0, _typeof2.default)(op) === 'object' ? op.label : op;
    }),
    renderInput: function renderInput(params) {
      return _renderInput((0, _assign.default)({}, params, {
        classes: classes,
        label: label,
        placeholder: placeholder
      }));
    }
  }, props));
};

exports.SelectMultiple = SelectMultiple;
//# sourceMappingURL=Select.js.map