import { useTranslation } from 'react-i18next';

import type { FeatureMeta } from '../../../types';
import { useTranslatedModes, type TransportMode } from '../../../hooks/useTravelTime';
import { ts } from '../../../i18n/server';
import MapLegend from '../MapLegend';

interface MobileMapLegendProps {
  mapViewFeature: string | null;
  colorRange: [number, number] | null;
  viewSource: 'drag' | 'eye' | null;
  mobileLegendMeta: FeatureMeta | null;
  densityLabel: string;
  densityRange: [number, number];
  theme: 'light' | 'dark';
  canResetPreviewScale: boolean;
  onCancelPin: () => void;
  onResetPreviewScale: () => void;
}

export function MobileMapLegend({
  mapViewFeature,
  colorRange,
  viewSource,
  mobileLegendMeta,
  densityLabel,
  densityRange,
  theme,
  canResetPreviewScale,
  onCancelPin,
  onResetPreviewScale,
}: MobileMapLegendProps) {
  const { t } = useTranslation();
  const modes = useTranslatedModes();

  if (mapViewFeature && colorRange) {
    if (mapViewFeature.startsWith('tt_')) {
      return (
        <MapLegend
          featureLabel={t('travel.travelTime', {
            mode: modes.label(mapViewFeature.split('_')[1] as TransportMode),
          })}
          range={colorRange}
          showCancel={viewSource === 'eye'}
          onCancel={onCancelPin}
          onResetScale={viewSource === 'eye' ? onResetPreviewScale : undefined}
          resetScaleDisabled={!canResetPreviewScale}
          mode="feature"
          theme={theme}
          inline
          suffix=" min"
        />
      );
    }

    if (mobileLegendMeta) {
      return (
        <MapLegend
          featureLabel={
            viewSource === 'eye'
              ? t('mapLegend.previewing', { name: ts(mobileLegendMeta.name) })
              : ts(mobileLegendMeta.name)
          }
          range={colorRange}
          showCancel={viewSource === 'eye'}
          onCancel={onCancelPin}
          onResetScale={viewSource === 'eye' ? onResetPreviewScale : undefined}
          resetScaleDisabled={!canResetPreviewScale}
          mode="feature"
          enumValues={mobileLegendMeta.type === 'enum' ? mobileLegendMeta.values : undefined}
          featureName={mobileLegendMeta.name}
          theme={theme}
          inline
          suffix={mobileLegendMeta.suffix}
          raw={mobileLegendMeta.raw}
        />
      );
    }

    return null;
  }

  return (
    <MapLegend
      featureLabel={densityLabel}
      range={densityRange}
      showCancel={false}
      onCancel={onCancelPin}
      mode="density"
      theme={theme}
      inline
    />
  );
}
