import React__default, { forwardRef, useRef, useLayoutEffect } from 'react';
import { SelectHidden } from './SelectNative.styles.js';
import { useForkRef } from '../../../../../hooks/useForkRef.js';
import { createEvent } from '../../../../../utils/createEvent.js';

var _option;
var SelectNative = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var name = _ref.name,
    multiple = _ref.multiple,
    items = _ref.items,
    value = _ref.value,
    onChange = _ref.onChange,
    onSetValue = _ref.onSetValue;
  var values = multiple ? value : [value];
  var selectRef = useRef(null);
  var forkRef = useForkRef(selectRef, ref);
  var options = Array.from(items.keys());
  useLayoutEffect(function () {
    if (selectRef.current && !multiple) {
      var valueInit = selectRef.current.value;
      if (valueInit) {
        onSetValue(valueInit);
      }
    }
    if (selectRef.current && multiple) {
      var valuesInit = Array.from(selectRef.current.selectedOptions).map(function (v) {
        return v.value;
      });
      if (valuesInit.length !== 0) {
        onSetValue(valuesInit);
      }
    }
  }, []);
  useLayoutEffect(function () {
    var event = createEvent(selectRef);
    if (onChange) {
      onChange(event);
    }
  }, [value]);
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SelectHidden, {
    ref: forkRef,
    multiple: multiple,
    name: name,
    hidden: true,
    value: multiple ? values : values[0]
  }, _option || (_option = /*#__PURE__*/React__default.createElement("option", null, " ")), options.map(function (v) {
    return /*#__PURE__*/React__default.createElement("option", {
      key: v,
      value: v
    }, v);
  })));
});

export { SelectNative };
//# sourceMappingURL=SelectNative.js.map
