import _extends from "@babel/runtime/helpers/esm/extends";
import _styled2 from "styled-components";
import _styled from "styled-components";
import React, { forwardRef } from "react";
import classNames from "classnames";
import { StyledCommandPaletteItem, StyledCommandPaletteItemLoader, StyledIcon } from "./CommandPalette.styles";
import { useSelectedContext } from "./context";
import { useSearchContext } from "./context/SearchContext";
import { findHighlightedSearch } from "../../utils/findHighlightedSearch";
import { SkeletonLoader } from "../Loaders";
import { Typography } from "../Typography/Typography";
const generateRandomWidth = () => {
  // generate range 30-80
  const randomNum = Math.round(Math.random() * 30 + 30);
  return randomNum + "%";
};
export const CommandPaletteItem = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    title,
    renderIcon,
    className,
    index,
    loading,
    as,
    ...rest
  } = _ref;
  const Component = as || "a";
  const icon = renderIcon && renderIcon();
  const {
    selected,
    setSelected
  } = useSelectedContext();
  const {
    search
  } = useSearchContext();
  const onMouseEnter = () => {
    setSelected(index);
  };
  if (loading) {
    return /*#__PURE__*/React.createElement(StyledCommandPaletteItemLoader, {
      "aria-busy": true,
      "aria-disabled": true
    }, /*#__PURE__*/React.createElement(_StyledSkeletonLoader, null), /*#__PURE__*/React.createElement(_StyledSkeletonLoader2, {
      $_css: generateRandomWidth()
    }));
  }
  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCommandPaletteItem, _extends({}, rest, {
    as: Component,
    ref: ref,
    className: classNames("cp-item", className),
    tabIndex: 1,
    "aria-selected": selected === index,
    onMouseEnter: onMouseEnter,
    $selected: index === selected
  }), /*#__PURE__*/React.createElement(StyledIcon, null, icon), search && title ? /*#__PURE__*/React.createElement(Typography, {
    overflow: "truncate",
    whitespace: "no-wrap",
    variant: "Body 1",
    color: "primary",
    dangerouslySetInnerHTML: {
      __html: findHighlightedSearch(search, title)
    }
  }) : null));
});
CommandPaletteItem.displayName = "CommandPaletteItem";
var _StyledSkeletonLoader = _styled(SkeletonLoader).withConfig({
  displayName: "CommandPaletteItem___StyledSkeletonLoader",
  componentId: "sc-6tfj5q-0"
})({
  width: 24,
  height: 24,
  borderRadius: "100%"
});
var _StyledSkeletonLoader2 = _styled(SkeletonLoader).withConfig({
  displayName: "CommandPaletteItem___StyledSkeletonLoader2",
  componentId: "sc-6tfj5q-1"
})(p => ({
  width: p.$_css,
  height: 16
}));
//# sourceMappingURL=CommandPaletteItem.js.map