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

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

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