import React from 'react';
import { ShapeSource, LineLayer } from '@maplibre/maplibre-react-native';
import { useMapStore } from '../storages/map';
import type { Feature, LineString } from 'geojson';

const Polylines: React.FC = () => {
  const polylines = useMapStore((state) => state.polylines);

  // Convert polylines to GeoJSON features
  const features: Feature<LineString>[] = polylines.map((polyline) => ({
    type: 'Feature',
    geometry: {
      type: 'LineString',
      coordinates: polyline.coordinates.map((coord) => [coord.lng, coord.lat]),
    },
    properties: {
      id: polyline.id,
      ...polyline.options,
    },
  }));

  if (features.length === 0) return null;

  return (
    <ShapeSource
      id="polylines-source"
      shape={{
        type: 'FeatureCollection',
        features,
      }}
    >
      <LineLayer
        id="polylines-layer"
        style={{
          lineColor: ['get', 'color'],
          lineWidth: ['get', 'width'],
          lineOpacity: ['get', 'opacity'],
        }}
      />
    </ShapeSource>
  );
};

export default Polylines;