import React, { useEffect } from 'react';

export interface BreadcrumbProps {
  /**
   * The array of breadcrumbs required { title: string, url: string, active: bool }
   */
  crumbs: { title: string; url: string; active: boolean }[];
  /**
   * The character to go in between each crumb, defaults to
   */
  delimiter: string;
  /**
   * The class applied to the delimiter, in case you want to change color or something easily
   */
  delimiterTheme: string;
  /**
   * Id to be added to the wrapper
   */
  id: string;
  /**
   * Class to be added to each link
   */
  linkClass: string;
  /**
   * A JSON object for the JSON schema for search engines
   */
  schema: boolean;
  /**
   * Classes to be applied to the wrapper
   */
  theme: string;
}

const Breadcrumbs = ({
  crumbs = [
    {
      title: 'Home',
      url: '/',
      active: false,
    },
    {
      title: 'Link Number 1',
      url: '/link1',
      active: true,
    },
  ],
  delimiter = '/',
  delimiterTheme = 'pl-3 pr-3 text-black',
  id,
  linkClass = 'transition-all hover:text-_-obi-dark',
  schema,
  theme = 'text-black',
}: BreadcrumbProps) => {
  useEffect(() => {
    // build our schema markup
    if (schema === true) {
      const itemListElement = [];
      for (var i = 0; i < crumbs.length; i++) {
        itemListElement.push({
          '@type': 'ListItem',
          position: i + 1,
          name: crumbs[i].title,
          item: `${window.location.origin}${crumbs[i].url}`,
        });
      }

      // insert the schema into the src
      const el = document.createElement('script');
      el.type = 'application/ld+json';

      el.text = JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'BreadcrumbList',
        itemListElement,
      });

      const head = document.querySelector('head') as HTMLHeadElement;
      head.appendChild(el);
    }
  }, [crumbs, schema]);

  return (
    <section data-c="slmr--Breadcrumb" className={theme} id={id}>
      {crumbs.map((c, i) => (
        <span key={c.title}>
          {c.active === true ? (
            <span className="text-slate-400">{c.title}</span>
          ) : (
            <a href={c.url} className={linkClass}>
              {c.title}
            </a>
          )}
          {i < crumbs.length - 1 && (
            <span
              data-c="slmr--Breadcrumb-delimiter"
              aria-hidden="true"
              className={delimiterTheme}
            >
              {delimiter}
            </span>
          )}
        </span>
      ))}
    </section>
  );
};

export default Breadcrumbs;