import { useCallback, useMemo, useState } from 'react';
import { slug } from '@digigov/ui/navigation/Breadcrumbs/slug';
import { flattenRoutes } from '@digigov/ui/navigation/Breadcrumbs/utils';

export interface BreadcrumbItem {
  title: string;
  href?: string;
  [key: string]: unknown;
}

export interface UseBreadcrumbsReturn {
  breadcrumbs: BreadcrumbItem[];
  currentRoute: string;
  setActiveItem: (item: BreadcrumbItem) => void;
}

export const useBreadcrumbs = (
  items: BreadcrumbItem[],
  initialUrlRoute?: string
): UseBreadcrumbsReturn => {
  const routes = useMemo(() => flattenRoutes(items, 100), [items]);
  const [currentRoute, setCurrentRoute] = useState(initialUrlRoute || '');

  const setActiveItem = useCallback(
    (item) => {
      const itemHref = item.href ?? slug(item.title, 100);
      setCurrentRoute(() => {
        const selectedRoute = Object.keys(routes).find((route) =>
          route.endsWith(itemHref)
        );
        return selectedRoute || '/';
      });
    },
    [routes]
  );

  const constructBreadcrumbs = useCallback(
    (routes): BreadcrumbItem[] => {
      if (currentRoute) {
        const selectedBreadcrumb = routes[currentRoute];
        return [
          ...(selectedBreadcrumb?.parents?.map((parent) => {
            return {
              title: parent,
              href: Object.keys(routes).find((route) => {
                return routes[route].title === parent;
              }),
            };
          }) || []),
          {
            title: selectedBreadcrumb?.title,
            href: currentRoute,
          },
        ];
      }
      return [];
    },
    [currentRoute]
  );

  return {
    breadcrumbs: constructBreadcrumbs(routes),
    currentRoute,
    setActiveItem,
  };
};