import _Breadcrumbs from "@mui/material/Breadcrumbs";
import _Menu from "@mui/material/Menu";
import _ButtonBase from "@mui/material/ButtonBase";
import _MenuItem from "@mui/material/MenuItem";
/*!
 * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
 * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
 *
 * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *
 * See the License for the specific language governing permissions and limitations under the License.
 */

import styled from "@emotion/styled";
import { createContext, memo, useCallback, useContext, useMemo, useState } from "react";
import { useTranslation } from "./i18n.generated/i18n.js";
import { GroupIcon, HomeIcon, UserIcon } from "./icons.generated/index.js";
import { Subordinate } from "./Typography.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export const BreadcrumbContext = createContext({
  breadcrumbType: "listItem"
});
const BreadcrumbContent = styled.span`
  white-space: nowrap;
  overflow: hidden;
  max-width: 10rem;
  text-overflow: ellipsis;
`;
export const Breadcrumb = ({
  children,
  href,
  iconName,
  onClick
}) => {
  const {
    breadcrumbType
  } = useContext(BreadcrumbContext);
  const onClickHandler = useCallback(event => {
    if (onClick) {
      event.preventDefault();
      event.stopPropagation();
      onClick(event);
    }
  }, [onClick]);
  const breadcrumbContent = _jsxs(_Fragment, {
    children: [iconName === "group" ? _jsx(GroupIcon, {}) : iconName === "user" ? _jsx(UserIcon, {}) : null, _jsx(BreadcrumbContent, {
      children: children
    })]
  });
  if (!href) {
    return _jsx(Subordinate, {
      color: "textPrimary",
      children: breadcrumbContent
    });
  }
  if (breadcrumbType === "menuItem") {
    return _jsx(_MenuItem, {
      component: "a",
      href: href,
      onClick: onClickHandler,
      children: breadcrumbContent
    });
  }
  if (breadcrumbType === "currentPage") {
    return _jsx(Subordinate, {
      ariaCurrent: "page",
      color: "textPrimary",
      children: breadcrumbContent
    });
  }
  return _jsx(_ButtonBase, {
    href: href,
    onClick: onClickHandler,
    children: breadcrumbContent
  });
};
const breadcrumbProviderValue = {
  currentPage: {
    breadcrumbType: "currentPage"
  },
  listItem: {
    breadcrumbType: "listItem"
  },
  menuItem: {
    breadcrumbType: "menuItem"
  }
};
const defaultTruncationValue = 5;
const BreadcrumbList = ({
  children,
  homeHref,
  maxVisibleItems: maxVisibleItemsProp = defaultTruncationValue,
  testId,
  translate
}) => {
  const {
    t
  } = useTranslation();
  const [anchorEl, setAnchorEl] = useState(null);
  const maxVisibleItems = useMemo(() => Math.min(Math.max(maxVisibleItemsProp, 0), children.length), [maxVisibleItemsProp, children]);
  const breadcrumbSections = useMemo(() => {
    if (children.length <= maxVisibleItems) {
      return {
        beforeMenu: [],
        insideMenu: [],
        remainingBreadcrumbs: children
      };
    } else {
      const menuStart = Math.floor(maxVisibleItems / 2);
      const menuLength = children.length - maxVisibleItems;
      return {
        beforeMenu: children.slice(0, menuStart),
        insideMenu: children.slice(menuStart, menuStart + menuLength),
        remainingBreadcrumbs: children.slice(menuStart + menuLength)
      };
    }
  }, [children, maxVisibleItems]);
  const onMenuButtonClick = useCallback(event => setAnchorEl(event.currentTarget), []);
  const onCloseMenu = useCallback(() => {
    setAnchorEl(null);
  }, []);
  return _jsxs(_Breadcrumbs, {
    "aria-label": t("breadcrumbs.label.text"),
    "data-se": testId,
    maxItems: children.length + 1,
    translate: translate,
    children: [homeHref && _jsx(_ButtonBase, {
      "aria-label": t("breadcrumbs.home.text"),
      href: homeHref,
      children: _jsx(HomeIcon, {})
    }), breadcrumbSections.beforeMenu.map((breadcrumb, index) => _jsx(BreadcrumbContext.Provider, {
      value: breadcrumbProviderValue.listItem,
      children: breadcrumb
    }, index)), breadcrumbSections.insideMenu.length > 0 && _jsxs(_Fragment, {
      children: [_jsx(_ButtonBase, {
        onClick: onMenuButtonClick,
        children: "..."
      }), _jsx(_Menu, {
        anchorEl: anchorEl,
        anchorOrigin: {
          horizontal: "left",
          vertical: "bottom"
        },
        MenuListProps: {
          sx: {
            minWidth: 180
          }
        },
        onClose: onCloseMenu,
        open: Boolean(anchorEl),
        children: _jsx(BreadcrumbContext.Provider, {
          value: breadcrumbProviderValue.menuItem,
          children: breadcrumbSections.insideMenu
        })
      })]
    }), breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, index) => {
      if (index === breadcrumbSections.remainingBreadcrumbs.length - 1) {
        return _jsx(BreadcrumbContext.Provider, {
          value: breadcrumbProviderValue.currentPage,
          children: breadcrumb
        }, index);
      }
      return _jsx(BreadcrumbContext.Provider, {
        value: breadcrumbProviderValue.listItem,
        children: breadcrumb
      }, index);
    })]
  });
};
const MemoizedBreadcrumbList = memo(BreadcrumbList);
MemoizedBreadcrumbList.displayName = "BreadcrumbList";
export { MemoizedBreadcrumbList as BreadcrumbList };
//# sourceMappingURL=Breadcrumbs.js.map