import React, { useEffect } from 'react';
import styled from 'styled-components';

import v from '../../styles/Variables';

interface Props {
  /**
   * 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, delimiter, delimiterTheme, id, linkClass, schema, theme }: Props) => {
  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 (
    <BreadCrumbStyle data-test="component-breadcrumb" className={`nwc--breadcrumb ${theme}`} id={id}>
      {crumbs.map((c, i) => (
        <span key={c.title}>
          {c.active === true ? (
            <span translate="no">{c.title}</span>
          ) : (
            <a href={c.url} className={linkClass}>
              {c.title}
            </a>
          )}
          {i < crumbs.length - 1 && (
            <span data-test="component-breadcrumb-delimiter" aria-hidden="true" className={`nwc--delimiter ${delimiterTheme}`}>
              {delimiter}
            </span>
          )}
        </span>
      ))}
    </BreadCrumbStyle>
  );
};

export default Breadcrumbs;

/* styles */
const BreadCrumbStyle = styled.section`
  font-size: 16px;
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
  color: ${v.colors.dark666};
  white-space: nowrap;

  a,
  span {
    border-bottom: none;
    padding: 8px 4px;
  }
`;