/* eslint-disable react/no-array-index-key */

/* eslint-disable react-hooks/rules-of-hooks */
import React from "react";
import SkeletonThemeWrapper from "../../customization-cornor/skeletonCustomization";
import ListItemPropTypes, { ListBoxPropTypes, ListSectionPropTypes } from "./ListItem.propTypes";
import useListBoxAriaProps from "./useListBoxAriaProps";

function handlePreventDefault(e, onClick) {
  e && e.preventDefault && e.preventDefault();
  e && e.stopPropagation && e.stopPropagation();
  e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
  onClick && onClick(e);
}

export default function ListItemBehaviour(props) {
  const {
    value,
    onChange,
    menuItemProps,
    selectedValue,
    active,
    href
  } = props;
  const isActive = active || selectedValue === value;
  const {
    itemId = null,
    ...ItemProps
  } = menuItemProps({
    active: isActive,
    ...props
  });
  const renderProps = {
    onClick: e => {
      onChange(value, itemId, e);
    },
    preventDefault: href ? e => handlePreventDefault(e, onChange) : null,
    menuItemProps: ItemProps,
    active: isActive
  };
  const {
    renderComponent,
    ...basicProps
  } = props;
  return /*#__PURE__*/React.createElement(SkeletonThemeWrapper, {
    basicProps: basicProps,
    renderProps: renderProps,
    component: renderComponent
  });
}
export function ListBoxBehaviour(props) {
  const {
    children,
    selectedValue,
    onChange,
    wrap,
    focus,
    hover,
    needAccess,
    accessProps
  } = props;
  const {
    menuItemProps,
    menuProps,
    rootElementProps
  } = needAccess ? useListBoxAriaProps({ ...props
  }, {
    focus: focus || true,
    wrap: wrap || true,
    hover: hover || true,
    role: 'listbox'
  }) : accessProps;
  const renderChildren = React.Children.map(children, (child, i) => /*#__PURE__*/React.cloneElement(child, {
    key: i,
    selectedValue,
    onChange: onChange || null,
    menuItemProps
  }));
  const renderProps = {
    children: renderChildren,
    menuProps: typeof menuProps === 'function' ? menuProps() : menuProps,
    rootElementProps: typeof rootElementProps === 'function' ? rootElementProps() : rootElementProps
  };
  const {
    renderComponent,
    ...basicProps
  } = props;
  return /*#__PURE__*/React.createElement(SkeletonThemeWrapper, {
    basicProps: basicProps,
    renderProps: renderProps,
    component: renderComponent
  });
}
export function ListSectionBehaviour(props) {
  const {
    children,
    selectedValue,
    onChange,
    menuItemProps
  } = props;
  const renderChildren = React.Children.map(children, (child, i) => /*#__PURE__*/React.cloneElement(child, {
    key: i,
    selectedValue,
    onChange,
    menuItemProps
  }));
  const renderProps = {
    children: renderChildren,
    menuItemProps
  };
  const {
    renderComponent,
    ...basicProps
  } = props;
  return /*#__PURE__*/React.createElement(SkeletonThemeWrapper, {
    basicProps: basicProps,
    renderProps: renderProps,
    component: renderComponent
  });
}
ListItemBehaviour.propTypes = ListItemPropTypes;
ListBoxBehaviour.propTypes = ListBoxPropTypes;
ListSectionBehaviour.propTypes = ListSectionPropTypes;