import { Source, Layer } from 'react-map-gl/maplibre';
import fishingZonesData from '../../data/zones/fishing-zones-wgs84.json';

const ZONE_FILL: Record<string, string> = {
  I: 'rgba(59, 130, 246, 0.15)',
  II: 'rgba(16, 185, 129, 0.15)',
  III: 'rgba(245, 158, 11, 0.15)',
  IV: 'rgba(239, 68, 68, 0.15)',
};

const ZONE_LINE: Record<string, string> = {
  I: 'rgba(59, 130, 246, 0.6)',
  II: 'rgba(16, 185, 129, 0.6)',
  III: 'rgba(245, 158, 11, 0.6)',
  IV: 'rgba(239, 68, 68, 0.6)',
};

const fillColor = [
  'match', ['get', 'zone'],
  'I', ZONE_FILL.I,
  'II', ZONE_FILL.II,
  'III', ZONE_FILL.III,
  'IV', ZONE_FILL.IV,
  'rgba(0,0,0,0)',
] as maplibregl.ExpressionSpecification;

const lineColor = [
  'match', ['get', 'zone'],
  'I', ZONE_LINE.I,
  'II', ZONE_LINE.II,
  'III', ZONE_LINE.III,
  'IV', ZONE_LINE.IV,
  'rgba(0,0,0,0)',
] as maplibregl.ExpressionSpecification;

export function FishingZoneLayer() {
  return (
    <Source id="fishing-zones" type="geojson" data={fishingZonesData as GeoJSON.FeatureCollection}>
      <Layer
        id="fishing-zone-fill"
        type="fill"
        paint={{ 'fill-color': fillColor, 'fill-opacity': 1 }}
      />
      <Layer
        id="fishing-zone-line"
        type="line"
        paint={{
          'line-color': lineColor,
          'line-opacity': 1,
          'line-width': 1.5,
          'line-dasharray': [4, 2],
        }}
      />
    </Source>
  );
}
