import React, { useMemo } from 'react';
import { breadcrumb } from '@trail-ui/theme';
import { link } from '@trail-ui/theme';
import { Link as AriaLink } from 'react-aria-components';

import {
  AriaBreadcrumbsProps,
  AriaBreadcrumbItemProps,
  useBreadcrumbItem,
  useBreadcrumbs,
} from 'react-aria';

interface BreadcrumbItem extends AriaBreadcrumbItemProps {
  href: string;
  before?: React.ReactNode;
  after?: React.ReactNode;
}

interface BreadcrumbsProps extends AriaBreadcrumbsProps {
  children?: React.ReactNode;
}

function Breadcrumbs(props: AriaBreadcrumbsProps & { children: React.ReactNode }) {
  let { navProps } = useBreadcrumbs(props);
  let childCount = React.Children.count(props.children);

  const slots = useMemo(() => breadcrumb(props), [props]);

  return (
    <nav {...navProps}>
      <ol className={slots.orderedList(props)}>
        {React.Children.map(
          props.children,
          (child, i) =>
            child &&
            React.cloneElement(child as React.ReactElement<any>, {
              isCurrent: i === childCount - 1,
            }),
        )}
      </ol>
    </nav>
  );
}

function BreadcrumbItem(props: BreadcrumbItem) {
  let ref = React.useRef(null);
  let { itemProps } = useBreadcrumbItem(props, ref);

  const slots = useMemo(() => breadcrumb(props), [props]);

  return (
    <li className={slots.base(props)}>
      {props.before && (
        <span aria-hidden="true" aria-current="page">
          {props.before}
        </span>
      )}
      <AriaLink
        {...itemProps}
        ref={ref}
        href={props.href}
        className={link({
          underline: props.isCurrent ? 'hover' : 'always',
          color: 'foreground',
          className: props.isCurrent ? 'font-medium' : 'font-normal',
        })}
        onFocus={props.onFocus}
        onBlur={props.onBlur}
      >
        {props.children}
      </AriaLink>
      {props.after && (
        <span aria-hidden="true" aria-current="page">
          {props.after}
        </span>
      )}
      {!props.isCurrent && (
        <span aria-hidden="true" style={{ padding: '0 5px' }}>
          {'/'}
        </span>
      )}
    </li>
  );
}

export { Breadcrumbs, BreadcrumbItem };
export type { BreadcrumbsProps };