import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { Flex, Icon, chakra, Tooltip, Link, Grid, Skeleton } from '@chakra-ui/react';
import { NavLink as NavLink$1 } from 'react-router-dom';
import { statusToProps } from './statusHelper.js';

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
const getIsDisabled = (isDisabledProp, status) => status === "error" || isDisabledProp;
function NavLink(props) {
  const {
    title,
    to,
    icon,
    onClick,
    isIconOnly = false,
    isCollapsed = false,
    isExternal = false,
    isDisabled = false,
    disabledText,
    status = "success"
  } = props;
  const skeletonItem = /* @__PURE__ */ jsx(Grid, { alignContent: "center", height: "40px", padding: "0.75rem", opacity: "0.5", children: /* @__PURE__ */ jsx(Skeleton, { height: "27px" }) });
  const renderItem = /* @__PURE__ */ jsxs(Flex, { alignItems: "center", children: [
    !!icon && /* @__PURE__ */ jsx(Icon, { "data-testid": `nav-link-icon-${title}`, as: icon, w: "1.2rem", h: "1.2rem", mr: 3 }),
    !isCollapsed && !isIconOnly ? /* @__PURE__ */ jsx(chakra.span, { "data-testid": `nav-link-${title}`, children: title }) : /* @__PURE__ */ jsx(chakra.span, { userSelect: "none", children: "\xA0" })
  ] });
  const activeLink = isExternal ? /* @__PURE__ */ jsx(Link, { href: to, variant: "nav", isExternal: true, onClick, "data-testid": `nav-link`, children: renderItem }) : /* @__PURE__ */ jsx(Link, { as: NavLink$1, to, variant: "nav", onClick, children: renderItem });
  const disabledLink = /* @__PURE__ */ jsx(Tooltip, { label: disabledText, placement: "right", hasArrow: true, children: /* @__PURE__ */ jsx(Link, __spreadProps(__spreadValues({ variant: "nav-disabled" }, statusToProps(status)), { children: renderItem })) });
  return status === "loading" ? /* @__PURE__ */ jsx(Fragment, { children: skeletonItem }) : getIsDisabled(isDisabled, status) ? /* @__PURE__ */ jsx(Fragment, { children: disabledLink }) : isCollapsed ? /* @__PURE__ */ jsx(Tooltip, { label: title, placement: "right", hasArrow: true, children: activeLink }) : /* @__PURE__ */ jsx(Fragment, { children: activeLink });
}

export { NavLink as default };
//# sourceMappingURL=NavLink.js.map
