import { useNavigate } from 'react-router-dom';

import Stack, { StackProps } from '@material-hu/mui/Stack';

import HuBreadcrumbs from '@material-hu/components/design-system/Breadcrumbs';

import { BreadcrumbItem } from 'src/types/library';

import useLibrariesBreadcrumb from '../../hooks/useLibrariesBreadcrumb';
import { librariesRoutes } from '../../routes';

import { BreadcrumbsSkeleton } from './BreadcrumbsSkeleton';

export type BreadcrumbsProps = StackProps & {
  items: BreadcrumbItem[];
  loading?: boolean;
};

export const Breadcrumbs = ({
  items,
  loading = false,
  ...stackProps
}: BreadcrumbsProps) => {
  const navigate = useNavigate();

  const handleClick = (to?: BreadcrumbItem['id']) => () =>
    to != null
      ? navigate(librariesRoutes.library(to))
      : navigate(librariesRoutes.base());

  const links = useLibrariesBreadcrumb(items, handleClick);

  return (
    <Stack {...stackProps}>
      {loading && <BreadcrumbsSkeleton />}
      {!loading && <HuBreadcrumbs links={links} />}
    </Stack>
  );
};

export default Breadcrumbs;