import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import type { IconName } from '../../atoms/Icon';

import type { BottomMenuProps } from './BottomMenu.types';
import { BottomMenuButton } from './BottomMenuButton';

/**
 * Mapeo de los nombres "paper-icon" históricamente usados en pantallas
 * a los nombres internos de Icon. Cuando todas las pantallas pasen
 * tipos `IconName`, este mapa puede eliminarse.
 */
const paperToAppIcon: Record<string, IconName> = {
  'cloud-upload': 'upload',
  'cloud-sync': 'refresh',
  'content-save-outline': 'save',
  'cursor-default-click': 'check',
};

function resolveIcon(icon: string | undefined, fallback: IconName): IconName {
  if (!icon) {
    return fallback;
  }
  if (icon in paperToAppIcon) {
    return paperToAppIcon[icon];
  }
  return icon as IconName;
}

export function BottomMenu({
  onObservationPress,
  onTechnicalSheetPress,
  onCreatePress,
  isObservationDisabled = false,
  isTechnicalSheetDisabled = false,
  onBackPress,
  showBackButton = true,
  onAddPress,
  isAddDisabled = false,
  isSelectionMode = false,
  observationLabel = 'Seleccionar',
  observationIcon,
  observationBadgeCount = 0,
  onSelectAll,
  onDeselectAll,
}: BottomMenuProps) {
  const insets = useSafeAreaInsets();

  const containerClass =
    'mx-4 mt-2 flex-row items-center justify-around rounded-[15px] border border-primary-700/70 bg-primary px-4 py-3';

  if (isSelectionMode) {
    return (
      <View style={{ marginBottom: Math.max(insets.bottom, 6) }} className={containerClass}>
        {onObservationPress ? (
          <BottomMenuButton
            icon="arrowLeft"
            label="Atrás"
            onPress={onObservationPress}
            tone="default"
          />
        ) : null}
        {onSelectAll ? (
          <BottomMenuButton
            icon="listChecks"
            label="Seleccionar"
            onPress={onSelectAll}
            disabled={isObservationDisabled}
          />
        ) : null}
        {onDeselectAll ? (
          <BottomMenuButton
            icon="square"
            label="Deseleccionar"
            onPress={onDeselectAll}
            disabled={isObservationDisabled || observationBadgeCount === 0}
          />
        ) : null}
        {onAddPress ? (
          <BottomMenuButton
            icon="plus"
            label="Agregar"
            onPress={onAddPress}
            disabled={isAddDisabled}
            badgeCount={observationBadgeCount}
            tone="muted"
          />
        ) : null}
        {onTechnicalSheetPress ? (
          <BottomMenuButton
            icon="fileText"
            label="Ficha"
            onPress={onTechnicalSheetPress}
            disabled={isTechnicalSheetDisabled}
            tone="default"
          />
        ) : null}
      </View>
    );
  }

  return (
    <View style={{ marginBottom: Math.max(insets.bottom, 6) }} className={containerClass}>
      {showBackButton && onBackPress ? (
        <BottomMenuButton icon="arrowLeft" label="Atrás" onPress={onBackPress} tone="default" />
      ) : null}
      {onCreatePress ? (
        <BottomMenuButton icon="add" label="Agregar" onPress={onCreatePress} tone="muted" />
      ) : null}
      {onObservationPress ? (
        <BottomMenuButton
          icon={resolveIcon(observationIcon, 'check')}
          label={observationLabel}
          onPress={onObservationPress}
          disabled={isObservationDisabled}
          badgeCount={observationBadgeCount}
          tone="active"
        />
      ) : null}
      {onTechnicalSheetPress ? (
        <BottomMenuButton
          icon="fileText"
          label="Ficha"
          onPress={onTechnicalSheetPress}
          disabled={isTechnicalSheetDisabled}
          tone="default"
        />
      ) : null}
    </View>
  );
}