import {
  component$,
  NoSerialize,
  noSerialize,
  Ref,
  useClientEffect$,
  useClientMount$,
  useMount$,
  useRef,
  useSignal,
  useStore,
  useStyles$,
  useStylesScoped$,
} from '@builder.io/qwik';

import OlMap from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Attribution from 'ol/control/Attribution';
import Rotate from 'ol/control/Rotate';
import ScaleLine from 'ol/control/ScaleLine';
import Control from 'ol/control/Control';
import OSM from 'ol/source/OSM';
import { useGeographic as olUseGeographic } from 'ol/proj';

import './Map.css';

interface MapStore {
  map: NoSerialize<OlMap> | null;
}

// Notice the default export
export default component$(() => {
  const store = useStore<MapStore>({ map: null });

  /**
   * export function useRef<T = Element>(current?: T): Ref<T> {
  return useStore({ current });
}
   */

  const target = useSignal<HTMLDivElement>();

  useClientEffect$(() => {
    console.log({ caller: 'Map / useMount$' });
    const olMap = new OlMap({
      view: new View({
        center: [0, 0],
        zoom: 1,
      }),
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
        //          new VectorLayer({ source: newSource }),
      ],
      target: target.value,
      //        controls,
    });
    //      olMap.on(['moveend'], changeListener);
    store.map = noSerialize(olMap);
  });
  return <div ref={target} id='map'></div>;
});