// import mapboxgl from 'mapbox-gl'; // or "const mapboxgl = require('mapbox-gl');"
// import { fromEvent } from 'rxjs'; 
// import { filter, tap } from 'rxjs/operators';
// import { createMachine, assign, spawn, StateMachine, send, AssignAction } from 'xstate';
// import { MapModel, NavigatorModel, MapContext, MapEvent, MapboxResult, GeocodeResult } from '../Models/spatial.types';
// import { SelectModel, SelectContext } from '../Models/select.types';


// import { useMachine } from "$lib/@iioioo_utils/Services/useMachine";
// import { selectMachine } from './selectMachine';
// import { navigatorMachine } from './navigatorMachine';

// const token = 'pk.eyJ1IjoiaGVpbnNjaHVsaWUiLCJhIjoiY2tobmdjbDI1MHFzcjJ3bXhoZ2ZiNnp2ZSJ9.Yt_ozyWNVySDxyybCuWKUw'; // TODO: this should be environment variable
// const fetchGeocodingService = async ( context: SelectContext ) => {
//     // const query = context.querySubject.getValue(); 
//     // const response = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${query}.json?access_token=${token}&proximity=18.4241,-33.9249`)
//     // const json = await response.json();
//     // const result = transformResponse(json);
//     // return result;         
// };

// const transformResponse = (response: MapboxResult): GeocodeResult[] => {
    
//     //   return response.features.map(feature => ({
//     //     text: feature.text,
//     //     id: feature.id,
//     //     zipCode: feature.context.find(ctx => ctx.id.startsWith('postcode'))?.text ?? '',
//     //     place: feature.context.find(ctx => ctx.id.startsWith('place'))?.text ?? '',
//     //     region: feature.context.find(ctx => ctx.id.startsWith('region'))?.text ?? '',
//     //     country: feature.context.find(ctx => ctx.id.startsWith('country'))?.text ?? '',
//     //     center: feature.center,
//     //     type: feature.place_type,
//     //   }));

//     return response.features.map(feature => {
    
//         const zipcode = feature.context.find(ctx => ctx.id.startsWith('postcode'));
//         const place = feature.context.find(ctx => ctx.id.startsWith('place'));
//         const region = feature.context.find(ctx => ctx.id.startsWith('region'));
//         const country = feature.context.find(ctx => ctx.id.startsWith('country'));
    
//         return {
//             text: feature.text,
//             id: feature.id,
//             zipCode: !!zipcode ? zipcode.text : '',
//             place: !!place ? place.text : '',
//             region: !!region ? region.text : '',
//             country: !!country ? country.text : '',
//             center: feature.center,
//             type: feature.place_type,
//         }
//     });
// };

// const assignService: AssignAction<MapContext, MapEvent> = assign({ store: ( context, event: any ) => event.store }); 
// const assignMap = assign({
//     map: ( context: MapContext, event ) => {
//         // TODO - move this out of package. Must be passed in from app 
//         mapboxgl.accessToken = 'pk.eyJ1IjoiaGVpbnNjaHVsaWUiLCJhIjoiY2tobmdjbDI1MHFzcjJ3bXhoZ2ZiNnp2ZSJ9.Yt_ozyWNVySDxyybCuWKUw';
//         return new mapboxgl.Map({
//             container: 'map',
//             style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
//             center: context.center, // [-74.5, 40], // starting position [lng, lat]
//             zoom: 9 // starting zoom
//         });

//     }
// })

// const registerEvents = ( context: MapContext, event ) => {
    
//     // TODO: Convert all to rxjs subscriptions that are adequately disposed off at the appropriate time. 

//     const map = context.map;

//     const keydown$ = fromEvent( document, 'keydown').pipe(
//         filter((evt: any) => evt.key === ' '),
//         tap(evt => context.store.send({ type: 'ENTER_SELECT' }))
//     ).subscribe();

//     const keyup$ = fromEvent( document, 'keyup').pipe(
//         filter((evt: any) => evt.key === ' '),
//         tap(evt => context.store.send({ type: 'EXIT_SELECT' }))
//     ).subscribe();

//     map.on('click', (e) => {
//         // The event object (e) contains information like the
//         // coordinates of the point on the map that was clicked.
//         context.store.send('CLICK');
//     });
  
//     map.on('moveend', (e) => {
//     });

// }

// const hasCenter = (context, event) => event.value && event.value.center;

// export const mapMachine = ( field: MapModel ) => createMachine<MapContext, MapEvent>(
// {
//     id: 'map',
//     initial: 'idle',
//     context: {
//         store: null,
//         results: [],
//         navigatorModel: null,
//         navigatorMachine: null,
//         selectModel: null,
//         selectMachine: null,
//         map: null,
//         center: [ 18.4241, -33.9249 ],
//         // zoom: 9
//     },
//     on: {
//         ENTER_SELECT: 'select',
//         EXIT_SELECT: 'active',
//         // XIO__STORE_INITIATED: {
//         //     actions: [ 'assignService' ]
//         // },
//         // XIO__CHILD_TO_PARENT: {
//         //     actions: [
//         //         send((context, event) => ({
//         //             type: 'SELECTED',
//         //             center: event.value.center
//         //         })),
//         //         ( context, event ) => {
//         //             context.map.flyTo({
//         //                 center: context.center,
//         //                 essential: true // this animation is considered essential with respect to prefers-reduced-motion
//         //             });
//         //         }
//         //     ],
//         //     cond: hasCenter
//         // }
//     },
//     states: {
//         idle: {
//             on: {
//                 XIO__DOM_READY: {
//                     target: 'active',
//                     actions: [ 'assignMap', 'registerEvents' ]
//                 }
//             }
//         },
//         active: {
//             type: 'parallel',
//             states: {
//                 map: {
//                     on: {
//                         SELECTED: {
//                             actions: [
//                                 assign({
//                                     center: ( context, event ) => {
//                                         return event.center;
//                                     }
//                                 })
//                             ]
//                         }
//                     }
//                 },
//                 navigator: {
//                     entry: assign(( context: MapContext ) => {
                        
//                         if( field.locateable ) {
//                             const navigatorModel = new NavigatorModel({});
//                             const store = useMachine( spawn( navigatorMachine( navigatorModel ), 'navigatorLocate' ), {}, false, 'navigatorLocate' );
//                             context = { 
//                                 ...context, 
//                                 navigatorModel,
//                                 navigatorMachine: store
//                             };
//                         }
                        
//                         return context; 
                        
//                     })
//                 },
//                 search: {
//                     entry: assign(( context: MapContext ) => {
                        
//                         if( field.searchable ) {
//                             const selectModel = new SelectModel({}) //{ metric: 'text', fetchAsync: fetchGeocodingService });
//                             const store = useMachine( spawn( selectMachine( selectModel ), 'mapSearch' ), {}, false, 'mapSearch' );
//                             context = { 
//                                 ...context, 
//                                 selectModel,
//                                 selectMachine: store
//                             };
//                         }
                        
//                         return context; 
                        
//                     }),
//                 }
//             }
//         },
//         select: {
//             on: {
//                 CLICK: {
//                     actions: [
//                     ]
//                 }
//             }
//         }
//     },
// },
// {
//     actions: {
//         assignService,
//         assignMap,
//         registerEvents
//     },
//     services: {},
//     guards: {
//         hasCenter 
//     }
// });