import React, { useRef, useState, useEffect } from "react";
import SkeletonThemeWrapper from "../../../customization-cornor/skeletonCustomization";
import useComboBoxAriaProps from "../controllers/useComboBoxAriaProps";
import Popup from "../../popup/__popupfunctionality";
import { Option } from "../Select";
import useSelect from "../useSelect";
import style from '../Select.module.css';
export const onChangeCallbackHandler = (onChange, optionOnChange, callback, togglePopup) => {
  if (!optionOnChange) {
    return (value, itemId, ev) => {
      onChange && onChange(value, ev);
      togglePopup && togglePopup(ev);
      callback && callback(ev, itemId);
    };
  }

  return (value, itemId, ev) => {
    onChange && onChange(value, ev);
    togglePopup && togglePopup(ev);
    optionOnChange && optionOnChange(value, ev);
    callback && callback(ev, itemId);
  };
};
export function SelectWithSearchBehaviour(props) {
  const {
    renderComponent,
    children,
    id,
    isPopupOpen,
    togglePopup,
    renderSelectedValue,
    onGetNextOptions,
    ...basicProps
  } = props;
  const [selectedValue, onChange, activeValue] = useSelect(props, props.reducer);
  let [searchValue, onSetSearchValue] = useState("");
  useEffect(() => {
    if (!isPopupOpen) {
      onSetSearchValue("");
    }
  }, [isPopupOpen]);
  const ItemId = useRef(null);
  let {
    triggerProps,
    valueProps,
    menuProps,
    menuItemProps,
    rootElementProps,
    getInputRef,
    inputProps
  } = useComboBoxAriaProps({
    uniqueId: id,
    ...props,
    isPopupOpen
  });
  const renderChildren = React.Children.map(children, (child, i) => {
    if (child.type === Option) {
      return /*#__PURE__*/React.cloneElement(child, {
        key: i,
        selectedValue,
        onChange: onChangeCallbackHandler(onChange, child.props.onChange, (e, itemId) => {
          ItemId.current = itemId;
        }, props.togglePopup),
        menuItemProps,
        className: style.option
      });
    } else {
      return /*#__PURE__*/React.cloneElement(child, {
        key: i,
        selectedValue,
        onChange: onChangeCallbackHandler(onChange, child.props.onChange, (e, itemId) => {
          ItemId.current = itemId;
        }, props.togglePopup)
      });
    }
  });
  const renderProps = {
    triggerProps: triggerProps(props),
    valueProps: valueProps(),
    menuProps: menuProps(),
    rootElementProps: rootElementProps(),
    inputProps: inputProps(),
    accessProps: {
      menuItemProps,
      menuProps: menuProps(),
      rootElementProps: rootElementProps()
    },
    needAccess: false,
    isPopupOpen,
    togglePopup,
    searchValue,
    onSetSearchValue,
    children: renderChildren,
    getInputRef,
    selectedValue: !renderSelectedValue ? activeValue || selectedValue : renderSelectedValue(selectedValue),
    onChange: onChangeCallbackHandler(onChange, props.onChange, (e, itemId) => {
      ItemId.current = itemId;
    }, props.togglePopup),
    onScroll: e => handleScroll(e, onGetNextOptions)
  };
  return /*#__PURE__*/React.createElement(SkeletonThemeWrapper, {
    basicProps: basicProps,
    renderProps: renderProps,
    component: renderComponent
  });
}
export default Popup(SelectWithSearchBehaviour);