function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useState, useEffect, useRef } from 'react';
import TextBox from '../../textbox/TextBox';
import defaultStyle from '../Select.module.css';
import { ListBox } from '../../listitem/ListItem';
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
import selectCssJSLogic from '../Select.cssJSLogic';
import ArrowFillDown from '@zohodesk/icon/es/general/ArrowFillDown';
export default function SelectWithSearchSkeleton(props) {
  let {
    customStyle = {},
    children,
    selectedValue,
    searchValue,
    icon,
    //Popup component props
    isPopupOpen,
    togglePopup,
    getTargetRef,
    getContainerRef,
    //Accessiblity
    triggerProps,
    valueProps,
    menuProps,
    rootElementProps,
    inputProps,
    getInputRef,
    //
    removeClose,
    emptyState,
    //for showing empty options
    onSearch,
    //for filtering options hooks
    onSearchChange,
    //for listen TextBox onchange,
    onSetSearchValue,
    searchPlaceholder,
    //for TextBox search placeholder
    customSearchBox,
    // replacing textbox
    tagGeneralAttributes: {
      triggerGeneralAttributes = {},
      menuGeneralAttributes = {},
      searchGeneralAttributes = {}
    },
    tagAttributes: {
      triggerTagAttributes = {},
      menuTagAttributes = {},
      searchTagAttributes = {}
    }
  } = props;
  let style = useMergeStyle(defaultStyle, customStyle);
  let {
    selectClassName,
    selectIconClassName,
    listboxClassName
  } = selectCssJSLogic(props, style); // let arrowDownIcon = icon || <ArrowFillDown customStyle={{base : isPopupOpen? style.arrowRotate: style.arrowIcon}}/>;

  return /*#__PURE__*/React.createElement("div", _extends({
    className: style.baseSearch
  }, rootElementProps), /*#__PURE__*/React.createElement("div", _extends({}, triggerGeneralAttributes, {
    className: selectClassName,
    onClick: togglePopup,
    ref: getTargetRef
  }, valueProps, triggerProps, triggerTagAttributes), selectedValue), isPopupOpen ? /*#__PURE__*/React.createElement("div", {
    className: `${style.optionContainerSearch} ${listboxClassName}`,
    onClick: removeClose,
    ref: getContainerRef
  }, /*#__PURE__*/React.createElement("div", {
    className: style.searchBox
  }, !customSearchBox ? /*#__PURE__*/React.createElement(TextBox, _extends({
    variant: TextBox.constantProps.variant.flushed,
    tagGeneralAttributes: searchGeneralAttributes,
    onFocus: removeClose,
    value: searchValue,
    className: style.input,
    onChange: (value, e) => {
      onSetSearchValue && onSetSearchValue(value);
      onSearchChange && onSearchChange(value);
    },
    getRef: getInputRef,
    placeholder: searchPlaceholder
  }, inputProps, {
    tagAttributes: searchTagAttributes
  })) : customSearchBox(props)), /*#__PURE__*/React.createElement(ListBox, _extends({
    tagGeneralAttributes: menuGeneralAttributes
  }, props, menuProps, {
    className: style.flexAuto,
    tagAttributes: menuTagAttributes
  }), children)) : null);
}