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

const ZONE_FILL: Record<string, string> = {
  ZONE_I: 'rgba(59, 130, 246, 0.15)',
  ZONE_II: 'rgba(16, 185, 129, 0.15)',
  ZONE_III: 'rgba(245, 158, 11, 0.15)',
  ZONE_IV: 'rgba(239, 68, 68, 0.15)',
};

const ZONE_LINE: Record<string, string> = {
  ZONE_I: 'rgba(59, 130, 246, 0.6)',
  ZONE_II: 'rgba(16, 185, 129, 0.6)',
  ZONE_III: 'rgba(245, 158, 11, 0.6)',
  ZONE_IV: 'rgba(239, 68, 68, 0.6)',
};


const fillColor = [
  'match', ['get', 'id'],
  'ZONE_I', ZONE_FILL.ZONE_I,
  'ZONE_II', ZONE_FILL.ZONE_II,
  'ZONE_III', ZONE_FILL.ZONE_III,
  'ZONE_IV', ZONE_FILL.ZONE_IV,
  'rgba(0,0,0,0)',
] as maplibregl.ExpressionSpecification;

const lineColor = [
  'match', ['get', 'id'],
  'ZONE_I', ZONE_LINE.ZONE_I,
  'ZONE_II', ZONE_LINE.ZONE_II,
  'ZONE_III', ZONE_LINE.ZONE_III,
  'ZONE_IV', ZONE_LINE.ZONE_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>
  );
}