import React from 'react';

import type {
  BreadcrumbItem,
  BreadcrumbPressEvent,
  BreadcrumbsProps,
} from '../../../../types/breadcrumbs';
import { Button } from '../../../button/public';
import { Icon } from '../../../icon/public';
import { resolveIconSize } from '../../../icon/utils/resolveIconSize';
import { View } from '../../../layout/public';
import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
import { Text } from '../../../typography/public';

/*** Renders a breadcrumb trail whose final item represents the current location. */
export const Breadcrumbs = withZoraThemeScope(BreadcrumbsInner);

type BreadcrumbRenderItem =
  | {
      item: BreadcrumbItem;
      type: 'item';
    }
  | {
      type: 'ellipsis';
    };

/*** Connects serializable breadcrumb items to the component-level item press event. */
function BreadcrumbsInner({
  themeId: _themeId,
  mode: _mode,
  interactionPolicy,
  items,
  separator = '/',
  maxItems,
  compact = false,
  disabled = false,
  onItemPress,
  testID,
}: BreadcrumbsProps) {
  const normalizedMaxItems = normalizeMaxItems(maxItems);
  const renderItems = createRenderItems(items, normalizedMaxItems);
  const currentItemId = items.at(-1)?.id;

  if (items.length === 0) return null;

  return (
    <View direction="row" align="center" gap={compact ? 'xs' : 's'} testID={testID} wrap="wrap">
      {renderItems.map((renderItem, index) => {
        const showSeparator = index !== renderItems.length - 1;

        if (renderItem.type === 'ellipsis') {
          return (
            <React.Fragment key="ellipsis">
              <Text emphasis="muted" variant={compact ? 'caption' : 'bodySmall'}>
                …
              </Text>
              {showSeparator ? renderSeparator(separator) : null}
            </React.Fragment>
          );
        }

        return (
          <BreadcrumbItemView
            compact={compact}
            current={renderItem.item.id === currentItemId}
            disabled={disabled}
            interactionPolicy={interactionPolicy}
            item={renderItem.item}
            key={renderItem.item.id}
            onItemPress={onItemPress}
            separator={showSeparator ? separator : undefined}
            testID={testID}
          />
        );
      })}
    </View>
  );
}

/*** Renders one breadcrumb item and its optional following separator. */
function BreadcrumbItemView({
  compact,
  current,
  disabled,
  interactionPolicy,
  item,
  onItemPress,
  separator,
  testID,
}: {
  compact: boolean;
  current: boolean;
  disabled: boolean;
  interactionPolicy: BreadcrumbsProps['interactionPolicy'];
  item: BreadcrumbItem;
  onItemPress: ((event: BreadcrumbPressEvent) => void) | undefined;
  separator: string | undefined;
  testID: string | undefined;
}) {
  const interactive = !current && !disabled && !item.disabled && onItemPress !== undefined;

  return (
    <>
      {interactive ? (
        <Button
          color="neutral"
          interactionPolicy={interactionPolicy}
          leadingIcon={item.icon}
          onPress={() => onItemPress({ id: item.id })}
          size={compact ? 's' : 'm'}
          testID={testID ? `${testID}-item-${item.id}` : undefined}
          variant="ghost"
        >
          {item.label}
        </Button>
      ) : (
        <BreadcrumbLabel compact={compact} item={item} />
      )}
      {separator === undefined ? null : renderSeparator(separator)}
    </>
  );
}

/*** Renders one non-interactive breadcrumb label. */
function BreadcrumbLabel({ item, compact }: { item: BreadcrumbItem; compact: boolean }) {
  const { theme } = useZoraTheme();

  return (
    <View direction="row" align="center" gap="xs" wrap="nowrap">
      {item.icon ? (
        <Icon
          {...item.icon}
          color={theme.semantics.content.muted}
          size={resolveIconSize(compact ? 's' : 'm')}
        />
      ) : null}
      <Text emphasis="muted" variant={compact ? 'caption' : 'bodySmall'}>
        {item.label}
      </Text>
    </View>
  );
}

/*** Renders the configured separator with muted breadcrumb styling. */
function renderSeparator(separator: string): React.ReactNode {
  return (
    <Text emphasis="muted" variant="bodySmall">
      {separator}
    </Text>
  );
}

/*** Normalizes an optional maximum breadcrumb item count. */
function normalizeMaxItems(value: number | undefined): number | undefined {
  if (value === undefined || !Number.isFinite(value)) return undefined;
  return Math.max(0, Math.trunc(value));
}

/*** Collapses middle breadcrumb items into one ellipsis when required. */
function createRenderItems(
  items: readonly BreadcrumbItem[],
  maxItems: number | undefined,
): readonly BreadcrumbRenderItem[] {
  if (maxItems === undefined || maxItems === 0 || items.length <= maxItems || maxItems < 3) {
    return items.map((item) => ({ item, type: 'item' }));
  }

  const firstItem = items.at(0);
  if (firstItem === undefined) return [];

  const trailingCount = maxItems - 2;
  const trailingItems = items.slice(items.length - trailingCount);
  return [
    { item: firstItem, type: 'item' },
    { type: 'ellipsis' },
    ...trailingItems.map((item) => ({ item, type: 'item' }) satisfies BreadcrumbRenderItem),
  ];
}