import React from 'react';
import { cn } from '../../shared/utils';
import { Button } from '../button';
import { mapOverlayPositionClasses } from '../map/map-overlay-position';
import { BASEMAP_LABELS, type MapBasemap } from '../map/map-basemap';
import type { MapOverlayPosition } from '../map/map.types';

export interface MapBasemapControlProps extends Omit<
  React.HTMLAttributes<HTMLDivElement>,
  'onChange'
> {
  value: MapBasemap;
  onChange: (basemap: MapBasemap) => void;
  /** @default all six base maps */
  options?: Array<Exclude<MapBasemap, 'none'>>;
  /** Overrides the built-in English labels. */
  labels?: Partial<Record<MapBasemap, string>>;
  /** @default 'inline' */
  variant?: 'overlay' | 'inline';
  /** @default 'top-right' */
  position?: MapOverlayPosition;
  /** @default "Base map" */
  ariaLabel?: string;
}

const ALL_OPTIONS: Array<Exclude<MapBasemap, 'none'>> = [
  'roads',
  'grayscale',
  'high-contrast',
  'night',
  'satellite',
  'terrain',
];

/**
 * Switches between the six base maps.
 *
 * @description
 * `high-contrast` is the map's accessibility route, not a stylistic extra —
 * offer it wherever the map carries information the user must read precisely.
 *
 * @ai-rules
 * 1. Keep `high-contrast` in `options` unless you have a specific reason to drop it.
 * 2. Pass the same `value` to `<Map basemap>` or the buttons will disagree with the tiles.
 * 3. For `variant="overlay"`, place it inside `<Map>` as a child, or in a `relative` container.
 */
export const MapBasemapControl = React.forwardRef<HTMLDivElement, MapBasemapControlProps>(
  (
    {
      value,
      onChange,
      options = ALL_OPTIONS,
      labels,
      variant = 'inline',
      position = 'top-right',
      ariaLabel = 'Base map',
      className,
      ...props
    },
    ref
  ) => (
    <div
      ref={ref}
      role="group"
      aria-label={ariaLabel}
      className={cn(
        'flex flex-wrap items-center gap-1 rounded-[var(--radius-card)] border border-border bg-background/90 p-1 shadow-sm backdrop-blur-sm',
        variant === 'overlay' && mapOverlayPositionClasses(position),
        className
      )}
      {...props}
    >
      {options.map(option => {
        const isActive = option === value;

        return (
          <Button
            key={option}
            type="button"
            size="sm"
            variant={isActive ? 'default' : 'ghost'}
            aria-pressed={isActive}
            onClick={() => onChange(option)}
          >
            {labels?.[option] ?? BASEMAP_LABELS[option]}
          </Button>
        );
      })}
    </div>
  )
);
MapBasemapControl.displayName = 'MapBasemapControl';