import { batch, createContext, JSX } from 'solid-js';
import { createStore } from 'solid-js/store';
import { Marker as LeafletMarker } from 'leaflet';

import { Stop, Stops } from './types';


export type ByStopIdMarkers = Record<number, LeafletMarker[] | undefined>;

export interface SearchStore {
	getFoundStops: () => Stop[];
	setFoundStops: (stops: Stop[]) => void;

	getDisplayedStops: () => Stop[];
	setDisplayedStops: (stops: Stop[]) => void;

	addMarkers: (stopId: number, markers: LeafletMarker[]) => void;
};

export const SearchContext = createContext<SearchStore>();

export function SearchProvider(props: { children: JSX.Element }) {

	type Store = {
		foundStops: Stop[];
		markers: ByStopIdMarkers;
		displayedStops: Stop[];
	};

	const [store, setStore] = createStore<Store>({ foundStops: [], markers: {}, displayedStops: [] });

	const getFoundStops = (): Stop[] => {
		return store.foundStops;
	}

	const setFoundStops = (stops: Stop[]): void => {
		setStore('foundStops', stops);
	}

	const getDisplayedStops = (): Stop[] => {
		return store.displayedStops;
	}

	const setDisplayedStops = (stops: Stop[]): void => {
		setStore((s: Store) => {
			setStore('displayedStops', stops);
			return s;
		});
	}

	const addMarkers = (stopId: number, markers: L.Marker[]): void => {
		setStore('markers', stopId, markers);
	}

	return (
		<SearchContext.Provider value={{ getFoundStops, setFoundStops, getDisplayedStops, setDisplayedStops, addMarkers }}>
			{props.children}
		</SearchContext.Provider>
	);
}