import { component$, useStyles$ } from '@builder.io/qwik';
import { useContent, useLocation, ContentMenu } from '@builder.io/qwik-city';
import styles from './breadcrumbs.css?inline';

export const Breadcrumbs = component$(() => {
  useStyles$(styles);

  const { menu } = useContent();
  const loc = useLocation();

  const breadcrumbs = createBreadcrumbs(menu, loc.pathname);
  if (breadcrumbs.length === 0) {
    return null;
  }

  return (
    <nav class="breadcrumbs">
      {breadcrumbs.map((b) => (
        <span>{b.href ? <a href={b.href}>{b.text}</a> : b.text}</span>
      ))}
    </nav>
  );
});

export function createBreadcrumbs(menu: ContentMenu | undefined, pathname: string) {
  if (menu?.items) {
    for (const indexA of menu.items) {
      const breadcrumbA: ContentBreadcrumb = {
        text: indexA.text,
      };
      if (typeof indexA.href === 'string') {
        breadcrumbA.href = indexA.href;
      }
      if (indexA.href === pathname) {
        return [breadcrumbA];
      }

      if (indexA.items) {
        for (const indexB of indexA.items) {
          const breadcrumbB: ContentBreadcrumb = {
            text: indexB.text,
          };
          if (typeof indexB.href === 'string') {
            breadcrumbB.href = indexB.href;
          }
          if (indexB.href === pathname) {
            return [breadcrumbA, breadcrumbB];
          }

          if (indexB.items) {
            for (const indexC of indexB.items) {
              const breadcrumbC: ContentBreadcrumb = {
                text: indexC.text,
              };
              if (typeof indexC.href === 'string') {
                breadcrumbC.href = indexC.href;
              }
              if (indexC.href === pathname) {
                return [breadcrumbA, breadcrumbB, breadcrumbC];
              }
            }
          }
        }
      }
    }
  }

  return [];
}

interface ContentBreadcrumb {
  text: string;
  href?: string;
}