import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState } from 'react';
import { Multiselect } from 'multiselect-react-dropdown';
import { DropdownMenuItemCheckboxSelect } from './style.js';
import DropdownArrowIcon from '../../Icons/DropdownArrowIcon/index.js';
import CloseDropdownIcon from '../../Icons/CloseDropdownIcon/index.js';
import theme from '../../../Globals/theme.js';
import { ThemeProvider } from 'styled-components';
import globalStyle from '../../../Globals/global-styles.js';

var CheckboxDropdown = function CheckboxDropdown(_ref) {
  var dropdownOptions = _ref.dropdownOptions,
      placeholder = _ref.placeholder;

  var _useState = useState(placeholder),
      _useState2 = _slicedToArray(_useState, 2),
      dropdownPlaceholder = _useState2[0],
      setDropdownPlaceholder = _useState2[1];

  var _useState3 = useState(dropdownOptions),
      _useState4 = _slicedToArray(_useState3, 1),
      options = _useState4[0];

  var onSelect = function onSelect() {
    setDropdownPlaceholder("");
  };

  var onRemove = function onRemove(selectedList) {
    if (selectedList.length === 0) {
      setDropdownPlaceholder(placeholder);
    }
  };

  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
    theme: theme
  }, /*#__PURE__*/React__default.createElement(globalStyle, null), /*#__PURE__*/React__default.createElement(DropdownMenuItemCheckboxSelect, null, /*#__PURE__*/React__default.createElement(Multiselect, {
    options: options,
    onSelect: onSelect,
    onRemove: onRemove,
    placeholder: dropdownPlaceholder,
    displayValue: "options",
    showArrow: true,
    customArrow: /*#__PURE__*/React__default.createElement(DropdownArrowIcon, null),
    id: "DropdownMenuItemCheckbox",
    showCheckbox: true,
    avoidHighlightFirstOption: "true",
    customCloseIcon: /*#__PURE__*/React__default.createElement(CloseDropdownIcon, null)
  })));
};

export { CheckboxDropdown as default };
//# sourceMappingURL=index.js.map
