import * as React from 'react';
import classNames from 'classnames';

import { Breadcrumbs as CoreBreadcrumbs, useTranslations } from '@shoptet/ui-core-web';

import { dictionary } from './dictionary';

export interface BreadcrumbRoot {
  id?: number;
  url: string;
}

export interface BreadcrumbItem {
  id?: number;
  title: string;
  url?: string;
}

export type BreadcrumbsType = [BreadcrumbRoot, ...BreadcrumbItem[]];

export interface BreadcrumbsProps {
  /**
   * Breadcrumbs structure.
   * Each breadcrumb must have a title, except for the first one which must have an `url` but can't have a title.
   */
  breadcrumbs: BreadcrumbsType;
  /**
   * Appendix for the last breadcrumb item.
   */
  lastItemAppendix?: string;
}

export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ breadcrumbs, lastItemAppendix, ...rest }) => {
  const translations = useTranslations(dictionary);
  return (
    <CoreBreadcrumbs {...rest} label={translations.navigationLabel} className='breadcrumbNav'>
      <CoreBreadcrumbs.List>
        {breadcrumbs.map((item, index) => {
          const isCurrent = index === breadcrumbs.length - 1;
          const title = 'title' in item ? item.title : translations.homeLabel;

          return (
            <CoreBreadcrumbs.Item key={index} current={isCurrent} className='breadcrumbNav__item'>
              <CoreBreadcrumbs.Item.Content
                href={item.url}
                title={title}
                className={({ current }) =>
                  classNames(item.id && `id-${item.id}`, !current && 'breadcrumbNav__link', {
                    breadcrumbNav__itemRoot: !current && index === 0,
                  })
                }
              >
                {index === 0 ? null : title}
                {isCurrent && lastItemAppendix && <span>{lastItemAppendix}</span>}
              </CoreBreadcrumbs.Item.Content>
            </CoreBreadcrumbs.Item>
          );
        })}
      </CoreBreadcrumbs.List>
    </CoreBreadcrumbs>
  );
};