import { settings } from '@utils/config';
import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useIntl } from 'react-intl';
import { BreadcrumbList, WithContext } from 'schema-dts';
import styles from './Breadcrumb.module.scss';

const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => {
  const intl = useIntl();
  const router = useRouter();

  const isHome = router.pathname === '/';
  const isArticle = router.pathname.includes('/article/');
  const isProject = router.pathname.includes('/projet/');
  const isSubject = router.pathname.includes('/sujet/');
  const isThematic = router.pathname.includes('/thematique/');

  const getItems = () => {
    return (
      <>
        <li className={styles.item}>
          <Link href="/">
            <a>
              {intl.formatMessage({
                defaultMessage: 'Home',
                description: 'Breadcrumb: Home item',
              })}
            </a>
          </Link>
        </li>
        {(isArticle || isThematic || isSubject) && (
          <>
            <li className={styles.item}>
              <Link href="/blog">
                <a>
                  {intl.formatMessage({
                    defaultMessage: 'Blog',
                    description: 'Breadcrumb: Blog item',
                  })}
                </a>
              </Link>
            </li>
          </>
        )}
        {isProject && (
          <>
            <li className={styles.item}>
              <Link href="/projets">
                <a>
                  {intl.formatMessage({
                    defaultMessage: 'Projects',
                    description: 'Breadcrumb: Projects item',
                  })}
                </a>
              </Link>
            </li>
          </>
        )}
        <li className="screen-reader-text">{pageTitle}</li>
      </>
    );
  };

  const getElementsSchema = () => {
    const items = [];
    const homepage: BreadcrumbList['itemListElement'] = {
      '@type': 'ListItem',
      position: 1,
      name: intl.formatMessage({
        defaultMessage: 'Home',
        description: 'Breadcrumb: Home item',
      }),
      item: settings.url,
    };

    items.push(homepage);

    if (isArticle || isThematic || isSubject) {
      const blog: BreadcrumbList['itemListElement'] = {
        '@type': 'ListItem',
        position: 2,
        name: intl.formatMessage({
          defaultMessage: 'Blog',
          description: 'Breadcrumb: Blog item',
        }),
        item: `${settings.url}/blog`,
      };

      items.push(blog);
    }

    if (isProject) {
      const blog: BreadcrumbList['itemListElement'] = {
        '@type': 'ListItem',
        position: 2,
        name: intl.formatMessage({
          defaultMessage: 'Projects',
          description: 'Breadcrumb: Projects item',
        }),
        item: `${settings.url}/projets`,
      };

      items.push(blog);
    }

    const currentPage: BreadcrumbList['itemListElement'] = {
      '@type': 'ListItem',
      position: items.length + 1,
      name: pageTitle,
      item: `${settings.url}${router.asPath}`,
    };

    items.push(currentPage);

    return items;
  };

  const schemaJsonLd: WithContext<BreadcrumbList> = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    '@id': `${settings.url}/#breadcrumb`,
    itemListElement: getElementsSchema(),
  };

  return (
    <>
      <Head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
        ></script>
      </Head>
      {!isHome && (
        <nav id="breadcrumb" className={styles.wrapper}>
          <span className="screen-reader-text">
            {intl.formatMessage({
              defaultMessage: 'You are here:',
              description: 'Breadcrumb: You are here prefix',
            })}
          </span>
          <ol className={styles.list}>{getItems()}</ol>
        </nav>
      )}
    </>
  );
};

export default Breadcrumb;

<a id='n7' href='#n7'>7</a>
<a id='n8' href='#n8'>8</a>
<a id='n9' href='#n9'>9</a>
<a id='n10' href='#n10'>10</a>
<a id='n11' href='#n11'>11</a>
<a id='n12' href='#n12'>12</a>
<a id='n13' href='#n13'>13</a>
<a id='n14' href='#n14'>14</a>
<a id='n15' href='#n15'>15</a>
<a id='n16' href='#n16'>16</a>
<a id='n17' href='#n17'>17</a>
<a id='n18' href='#n18'>18</a>
<a id='n19' href='#n19'>19</a>
<a id='n20' href='#n20'>20</a>
<a id='n21' href='#n21'>21</a>
<a id='n22' href='#n22'>22</a>
<a id='n23' href='#n23'>23</a>
<a id='n24' href='#n24'>24</a>
<a id='n25' href='#n25'>25</a>
<a id='n26' href='#n26'>26</a>
<a id='n27' href='#n27'>27</a>
<a id='n28' href='#n28'>28</a>
<a id='n29' href='#n29'>29</a>
<a id='n30' href='#n30'>30</a>
<a id='n31' href='#n31'>31</a>
</pre></td>
<td class='lines'><pre><code>