import { Breadcrumb } from 'antd';
import { useEffect, useMemo } from 'react';
import { Link } from 'react-router-dom';

export interface BreadcrumbItem {
  label?: string;
  labelKey?: string;
  priority?: number;
  to?: string;
  external?: boolean;
}

interface AppBreadcrumbProps {
  items: BreadcrumbItem[];
  translate?: (key: string) => string;
}

const resolveLabel = (item: BreadcrumbItem, translate?: (key: string) => string) => {
  if (item.label) {
    return item.label;
  }
  if (item.labelKey && translate) {
    return translate(item.labelKey);
  }
  return item.labelKey ?? '';
};

const AppBreadcrumb = ({ items, translate }: AppBreadcrumbProps) => {
  const orderedItems = useMemo(() => {
    return items.map((item, index) => ({ ...item, __index: index })).sort((a, b) => (a.priority ?? a.__index) - (b.priority ?? b.__index));
  }, [items]);

  // When embedded inside a host (rate-fe / administrator-fe), broadcast the current page name (last
  // crumb) so the host header can show it on mobile, where this breadcrumb is hidden.
  const activeTitle = orderedItems.length ? resolveLabel(orderedItems[orderedItems.length - 1], translate) : '';
  useEffect(() => {
    window.dispatchEvent(new CustomEvent('rvn-active-page-title', { detail: { title: activeTitle } }));
  }, [activeTitle]);

  return (
    <Breadcrumb className="app-breadcrumb mb-2 w-100">
      {orderedItems.map((item, index) => {
        const label = resolveLabel(item, translate);
        const isLast = index === orderedItems.length - 1;

        return (
          <Breadcrumb.Item key={`${label}-${index}`}>
            {item.to && !isLast ? (
              item.external ? (
                <a
                  href={item.to}
                  onClick={(e) => {
                    e.preventDefault();
                    window.history.pushState(null, '', item.to);
                    window.dispatchEvent(new PopStateEvent('popstate', { state: null }));
                  }}
                >
                  {label}
                </a>
              ) : (
                <Link to={item.to}>{label}</Link>
              )
            ) : (
              <span className={isLast ? 'text-primary' : undefined}>{label}</span>
            )}
          </Breadcrumb.Item>
        );
      })}
    </Breadcrumb>
  );
};

export default AppBreadcrumb;