import React, { useEffect, useRef } from "react";
import SkeletonThemeWrapper from "../../../customization-cornor/skeletonCustomization";
import Popup from "../../popup/__popupfunctionality";
import useMultiSelectWithSearch from "../controllers/useMultiSelectWithSearch";
import useMultiSelectAriaProps from "../controllers/useMultiSelectAriaProps";

function MultiSelectWithSearchBehaviour(props) {
  const {
    id,
    isPopupOpen,
    renderComponent,
    children,
    ...basicProps
  } = props;
  const {
    selectedValues = [],
    onHandleSelect,
    onHandleRemove,
    searchString,
    onSearch,
    onRemoveAll,
    onSelectAll,
    addOptions,
    filterOptionsCheck,
    getFilteredOptionsData,
    shotcutKeys
  } = useMultiSelectWithSearch(props);
  const {
    triggerProps,
    valueProps,
    menuProps,
    menuItemProps,
    selectedItemProps,
    inputProps,
    focusRemove,
    rootElementProps
  } = useMultiSelectAriaProps({
    uniqueId: id,
    ...props,
    onKeyDown: shotcutKeys
  }, {
    isPopupOpen
  });
  useEffect(() => {
    React.Children.map(children, (child, index) => {
      if (child.type.displayName == "Option") {
        let {
          value,
          text
        } = child.props;
        addOptions({
          value,
          text
        });
      }
    });
  }, []);
  const renderChildren = React.Children.map(children, (child, index) => {
    let {
      removeClose
    } = props;
    return /*#__PURE__*/React.cloneElement(child, {
      onHandleSelect,
      onSelectAll,
      removeClose,
      menuItemProps,
      filteredOptions: getFilteredOptionsData,
      filterOptionsCheck
    });
  });
  let {
    tagRootElementProps,
    listRootElementProps
  } = rootElementProps();
  const renderProps = {
    selectedValues,
    children: renderChildren,
    onHandleRemove,
    onSearch,
    searchString,
    onRemoveAll,
    filterOptionsCheck,
    getFilteredOptionsData,
    triggerProps: triggerProps(props),
    valueProps: valueProps(),
    isPopupOpen,
    selectedItemProps,
    inputProps: inputProps(),
    focusRemove,
    rootElementProps: tagRootElementProps,
    menuProps: menuProps,
    onkeydown: shotcutKeys,
    needAccess: false,
    accessProps: {
      menuItemProps,
      menuProps,
      rootElementProps: listRootElementProps
    }
  };
  return /*#__PURE__*/React.createElement(SkeletonThemeWrapper, {
    basicProps: basicProps,
    renderProps: renderProps,
    component: renderComponent
  });
}

export default Popup(MultiSelectWithSearchBehaviour);
export function OptionBehaviour(props) {
  const {
    renderComponent,
    value,
    filteredOptions,
    filterOptionsCheck,
    ...basicProps
  } = props;
  let isIgnore = filterOptionsCheck(value, filteredOptions);
  let renderProps = {
    isIgnore,
    value
  };
  return /*#__PURE__*/React.createElement(SkeletonThemeWrapper, {
    basicProps: basicProps,
    renderProps: renderProps,
    component: renderComponent
  });
}
export function OptionSelectAllBehaviour(props) {
  let renderProps = {};
  const {
    renderComponent,
    ...basicProps
  } = props;
  return /*#__PURE__*/React.createElement(SkeletonThemeWrapper, {
    basicProps: basicProps,
    renderProps: renderProps,
    component: renderComponent
  });
}