import React from 'react';
import { cn } from '../../shared/utils';
import { mapOverlayPositionClasses } from '../map/map-overlay-position';
import type { MapOverlayPosition } from '../map/map.types';
import { niceScaleDistance } from './scale-distance';
import type { MapScaleUnits } from './units';

export interface MapScaleBarProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Ground distance one pixel covers. `<Map>` computes this from the current
   * zoom and latitude; pass it directly only when driving the bar yourself.
   */
  metersPerPixel: number;
  /** @default 'metric' */
  units?: MapScaleUnits;
  /** Longest the bar may be drawn, in pixels. @default 120 */
  maxWidthPx?: number;
  /** @default 'bottom-right' */
  position?: MapOverlayPosition;
  /** @default 'overlay' */
  layout?: 'overlay' | 'inline';
}

/**
 * Graphic scale bar.
 *
 * @description
 * No surveyed application had one, yet reports and dossiers circulate off
 * screen — and a static map with no scale cannot support a claim about
 * distance. Recomputed on every zoom change.
 *
 * @ai-rules
 * 1. Include it on any map that will be printed or exported.
 * 2. Prefer `<Map scaleBar>` over mounting this directly; the map already knows its zoom and latitude.
 * 3. The bar is decorative to assistive tech — its label carries the information.
 */
export const MapScaleBar = React.forwardRef<HTMLDivElement, MapScaleBarProps>(
  (
    {
      metersPerPixel,
      units = 'metric',
      maxWidthPx = 120,
      position = 'bottom-right',
      layout = 'overlay',
      className,
      ...props
    },
    ref
  ) => {
    const scale = niceScaleDistance(metersPerPixel, maxWidthPx, units);

    if (!scale) return null;

    return (
      <div
        ref={ref}
        className={cn(
          'flex select-none flex-col items-start gap-0.5 rounded-[var(--radius)] bg-background/85 px-1.5 py-1 backdrop-blur-sm',
          layout === 'overlay' && mapOverlayPositionClasses(position),
          className
        )}
        {...props}
      >
        <span className="text-[10px] font-medium leading-none text-foreground tabular-nums">
          {scale.label}
        </span>
        <span
          aria-hidden="true"
          className="border-b-2 border-l-2 border-r-2 border-foreground/70"
          style={{ width: Math.round(scale.widthPx), height: 5 }}
        />
      </div>
    );
  }
);
MapScaleBar.displayName = 'MapScaleBar';