function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

/* eslint-disable css-modules/no-unused-class */

/* eslint-disable jsx-a11y/click-events-have-key-events */

/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import React from "react";
import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
import Link from "../link/Link";
import listBoxDefaultstyle from "./ListBox.module.css";
import listSectionDefaultstyle from "./ListSection.module.css";
import listItemDefaultstyle from "./ListItem.module.css";
import listItemCssJSLogic from "./ListItem.cssJSLogic";
import listBoxCssJSLogic from "./ListBox.cssJSLogic";
import listSectionCssJSLogic from "./ListSection.cssJSLogic";
export default function ListItemSkeleton(props) {
  const {
    customStyle,
    value,
    disabled,
    customId,
    onClick,
    lhs,
    rhs,
    children,
    subTitle,
    text,
    href,
    isEmptyState,
    isLoadingState,
    emptyState,
    loadingState,
    menuItemProps,
    tagGeneralAttributes,
    tagAttributes
  } = props;
  const style = useMergeStyle(listItemDefaultstyle, customStyle);
  const {
    listClass,
    LHSAlignment,
    RHSAlignment,
    subTitleClass,
    contentClass
  } = listItemCssJSLogic(props, style);
  const childEle = /*#__PURE__*/React.createElement(React.Fragment, null, lhs ? /*#__PURE__*/React.createElement("div", {
    className: LHSAlignment
  }, lhs) : null, children || /*#__PURE__*/React.createElement("div", {
    className: contentClass
  }, text, subTitle && /*#__PURE__*/React.createElement("div", {
    className: subTitleClass
  }, subTitle)), rhs ? /*#__PURE__*/React.createElement("div", {
    className: RHSAlignment
  }, rhs) : null);
  return (// eslint-disable-next-line no-nested-ternary
    isEmptyState ? emptyState : isLoadingState ? loadingState : /*#__PURE__*/React.createElement("li", _extends({}, tagGeneralAttributes, {
      className: listClass,
      dataid: customId,
      value: value
    }, menuItemProps, {
      disabled: disabled,
      onClick: onClick
    }, tagAttributes), href ? /*#__PURE__*/React.createElement(Link, {
      href: href,
      hasPreventDefaultBehaviour: true,
      onClick: onClick
    }, childEle) : childEle)
  );
}
export function ListBoxSkeleton(props) {
  const {
    children,
    role,
    tabIndex,
    ariaLabel,
    customStyle,
    menuProps,
    rootElementProps,
    onScroll,
    tagGeneralAttributes,
    tagAttributes,
    getRef
  } = props;
  const style = useMergeStyle(listBoxDefaultstyle, customStyle);
  const boxClass = listBoxCssJSLogic(props, style);
  return /*#__PURE__*/React.createElement("ul", _extends({}, tagGeneralAttributes, {
    role: role,
    tabIndex: tabIndex,
    "aria-label": ariaLabel,
    className: boxClass,
    onScroll: onScroll
  }, menuProps, rootElementProps, tagAttributes, {
    ref: getRef
  }), children);
}
export function ListSectionSkeleton(props) {
  const {
    children,
    title,
    role,
    tabIndex,
    ariaLabel,
    customStyle,
    tagGeneralAttributes,
    tagAttributes
  } = props;
  const style = useMergeStyle(listSectionDefaultstyle, customStyle);
  const {
    sectionClass,
    titleClass,
    sectionlistClass
  } = listSectionCssJSLogic(props, style);
  return /*#__PURE__*/React.createElement("li", _extends({}, tagGeneralAttributes, {
    role: role,
    tabIndex: tabIndex,
    ariaLabel: ariaLabel,
    className: sectionClass
  }, tagAttributes), title && /*#__PURE__*/React.createElement("span", {
    className: titleClass
  }, title), /*#__PURE__*/React.createElement("ol", {
    className: sectionlistClass
  }, children));
}