import { Component, createEffect, createResource, For } from 'solid-js';

import OlMap from 'ol/Map';

import dispatch from '../../workers/dispatcher-main';
import Trk from '../trk';
import getUri from '../../lib/ids';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import { Circle, Fill, Icon, Stroke, Style } from 'ol/style';
import startIcon from '../../icons/flag-start-b-svgrepo-com.svg';

interface Props {
  gpxId: string;
  map: () => OlMap | null;
}

console.log({ caller: startIcon });

const style = [
  new Style({
    stroke: new Stroke({
      color: 'blue',
      width: 2,
    }),
    image: new Icon({
      src: startIcon,
      color: 'green',
      scale: 0.2,
      opacity: 0.6,
    }),
  }),
];

export const Gpx: Component<Props> = ({ map, gpxId }) => {
  const [gpx] = createResource(
    gpxId,
    async () =>
      await dispatch({
        action: 'getGpx',
        params: {
          id: gpxId,
        },
      })
  );

  const vectorSource = new VectorSource();
  const vectorLayer = new VectorLayer({ source: vectorSource, style });
  createEffect(() => map()?.addLayer(vectorLayer));

  createEffect(() => {
    console.log({ caller: 'Gpx', map: map(), gpxId, gpx: gpx(), vectorLayer });
  });

  return (
    // @ts-ignore
    <For each={gpx() ? gpx().trk || [] : []}>
      {(trkId: string) => {
        console.log({ caller: 'Gpx / loop', trkId });
        return <Trk vectorSource={vectorSource} trkId={trkId} />;
      }}
    </For>
  );
};

export default Gpx;