import Link from '@docusaurus/Link';
import {
    useSidebarBreadcrumbs,
} from '@docusaurus/plugin-content-docs/client';
import { ThemeClassNames } from '@docusaurus/theme-common';
import { useHomePageRoute } from '@docusaurus/theme-common/internal';
import { translate } from '@docusaurus/Translate';
import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home';
import clsx from 'clsx';
import React from 'react';

import styles from './styles.module.css';

// TODO move to design system folder
function BreadcrumbsItemLink({ children, href, isLast }) {
    const className = 'breadcrumbs__link';
    if (isLast) {
        return (
            <span className={className} itemProp="name">
                {children}
            </span>
        );
    }
    return href ? (
        <Link className={className} href={href} itemProp="item">
            <span itemProp="name">{children}</span>
        </Link>
    ) : (
        // TODO Google search console doesn't like breadcrumb items without href.
        // The schema doesn't seem to require `id` for each `item`, although Google
        // insist to infer one, even if it's invalid. Removing `itemProp="item
        // name"` for now, since I don't know how to properly fix it.
        // See https://github.com/facebook/docusaurus/issues/7241
        <span className={className}>{children}</span>
    );
}

// TODO move to design system folder
function BreadcrumbsItem({ children, active, index, addMicrodata }) {
    return (
        <li
            {...(addMicrodata && {
                itemScope: true,
                itemProp: 'itemListElement',
                itemType: 'https://schema.org/ListItem',
            })}
            className={clsx('breadcrumbs__item', {
                'breadcrumbs__item--active': active,
            })}>
            {children}
            <meta itemProp="position" content={String(index + 1)}/>
        </li>
    );
}

export default function DocBreadcrumbs() {
    const breadcrumbs = useSidebarBreadcrumbs()?.slice(0, -1);
    const homePageRoute = useHomePageRoute();
    if (!breadcrumbs || breadcrumbs.length === 0) {
        return null;
    }
    return (
        <nav
            className={clsx(
                ThemeClassNames.docs.docBreadcrumbs,
                styles.breadcrumbsContainer,
            )}
            aria-label={translate({
                id: 'theme.docs.breadcrumbs.navAriaLabel',
                message: 'Breadcrumbs',
                description: 'The ARIA label for the breadcrumbs',
            })}>
            <ul
                className="breadcrumbs"
                itemScope
                itemType="https://schema.org/BreadcrumbList">
                {homePageRoute && <HomeBreadcrumbItem/>}
                {breadcrumbs.map((item, idx) => {
                    // const isLast = idx === breadcrumbs.length - 1;
                    const isLast = false;
                    return (
                        <BreadcrumbsItem
                            key={idx}
                            active={isLast}
                            index={idx}
                            addMicrodata={!!item.href}>
                            <BreadcrumbsItemLink href={item.href} isLast={isLast}>
                                {item.label}
                            </BreadcrumbsItemLink>
                        </BreadcrumbsItem>
                    );
                })}
            </ul>
        </nav>
    );
}
