import React, { useEffect } from "react";
import SkeletonThemeWrapper from "../../customization-cornor/skeletonCustomization";
import Popup from "../popup/__popupfunctionality";
import useMultiSelect from "./controllers/useMultiSelect";
import useMultiSelectAriaProps from "./controllers/useMultiSelectAriaProps";
import style from './MultiSelect.module.css';

function MultiSelectBehaviour(props) {
  const {
    renderComponent,
    children,
    id,
    isPopupOpen,
    renderSelectedValue,
    onGetNextOptions,
    removeClose,
    onChange,
    ...basicProps
  } = props;
  const {
    selectedValues,
    list,
    onHandleSelect,
    onHandleRemove,
    shotcutKeys,
    addOptions,
    filterOptionsCheck,
    getFilteredOptionsData
  } = useMultiSelect(props);
  const {
    triggerProps,
    valueProps,
    menuProps,
    menuItemProps,
    selectedItemProps,
    focusRemove,
    rootElementProps
  } = useMultiSelectAriaProps({
    uniqueId: id,
    ...props,
    onKeyDown: shotcutKeys,
    isPopupOpen
  }, {
    selectedValues,
    list
  }, {
    listConfig: {
      focus: true,
      wrap: true,
      keyName: {
        up: ["arrowup"],
        down: ["arrowdown"]
      },
      activecss: style.highLight,
      activeAnyOnEnter: true
    },
    selectedConfig: {
      wrap: true,
      keyName: {
        left: ["arrowleft"],
        right: ["arrowright"]
      },
      focus: true,
      hover: false,
      activecss: style.highLight,
      activeAnyOnEnter: true
    }
  });
  const renderChildren = React.Children.map(children, (child, i) => {
    const {
      removeClose
    } = props;
    return /*#__PURE__*/React.cloneElement(child, {
      onHandleSelect,
      removeClose,
      filteredOptions: getFilteredOptionsData,
      filterOptionsCheck,
      menuItemProps
    });
  });
  useEffect(() => {
    React.Children.map(children, (child, index) => {
      if (child.type.displayName === "Option") {
        const {
          value,
          text
        } = child.props;
        addOptions({
          value,
          text
        });
      }
    });
  }, []);
  const {
    listRootElementProps,
    tagRootElementProps
  } = rootElementProps();
  const renderProps = {
    triggerProps: triggerProps(props),
    valueProps: valueProps(),
    selectedValues,
    children: renderChildren,
    onHandleRemove,
    isPopupOpen,
    selectedItemProps,
    focusRemove,
    rootElementProps: tagRootElementProps,
    accessProps: {
      menuProps,
      menuItemProps,
      rootElementProps: listRootElementProps
    },
    needAccess: false,
    onkeydown: shotcutKeys,
    getFilteredOptionsData
  };
  return /*#__PURE__*/React.createElement(SkeletonThemeWrapper, {
    basicProps: basicProps,
    renderProps: renderProps,
    component: renderComponent
  });
}

export default Popup(MultiSelectBehaviour);
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 SelectedOptionBehaviour(props) {
  const {
    renderComponent,
    ...basicProps
  } = props;
  const renderProps = {};
  return /*#__PURE__*/React.createElement(SkeletonThemeWrapper, {
    basicProps: basicProps,
    renderProps: renderProps,
    component: renderComponent
  });
}