import type { XIO__DOM_READY } from './stream.types'; 
import type { IFieldBase } from './field.types'; import { FieldBase } from './field.types'; 
import type { ISelect, SelectModel } from './select.types'; 

// mapbox types 

export interface MapboxFeature {
    bbox: [ number, number, number, number ];
    center: [ number, number ];
    context: { id: string, wikidata: string, short_code: string, text: string }[];
    geometry: { type: string, coordinates: [ number, number ] }
    id: string;
    place_name: string;
    place_type: string[];
    properties: { wikidata: string }
    relevance: number;
    text: string;
    type: "Feature";
  }
  
  export interface MapboxResult {
    attribution: string;
    features: MapboxFeature[];
    query: string[];
    type: "FeatureCollection"
  }
  
  export type GeocodeResult = {
    id: string;
    text: string;
    zipCode: string;
    place: string;
    region: string;
    country: string;
    center: readonly [number, number];
    type: string[];
  };


export type NavigatorContext = {
  location: number[]; 
  lastLocated: Date;
  allowed: boolean;
  watch: boolean;
};

export type NavigatorEvent = 
  { type: 'CHILD_TO_PARENT', value: any } | 
  { type: 'REQUEST_PERMISSION' } |
  { type: 'ALLOW', allow: boolean } |
  { type: 'DISALLOW', allow: boolean } |
  { type: 'LOCATE' } |
  { type: 'WATCH', allow: boolean } | 
  { type: 'LOCATED', lonlat: number[], datetime: Date } | 
  { type: 'RESET' } | 
  { type: 'ERROR' } ;

export type NavigatorState =
    {
      value: 'idle';
      context: NavigatorContext & {
        location: undefined; 
        lastLocated: undefined;
        allowed: boolean;
        watch: boolean;
      };
    }
  | {
      value: 'disallowed';
      context: NavigatorContext & {
        location: number[]; 
        lastLocated: undefined;
        allowed: boolean;
        watch: boolean;
      };
    }
  | {
      value: 'locating';
      context: NavigatorContext & {
        location: undefined; 
        lastLocated: undefined;
        allowed: boolean;
        watch: boolean;
      };
    }
  | {
      value: 'success';
      context: NavigatorContext & {
        location: number[]; 
        lastLocated: undefined;
        allowed: boolean;
        watch: boolean;
      };
    }
  | {
      value: 'failure';
      context: NavigatorContext & {
        location: undefined; 
        lastLocated: undefined;
        allowed: boolean;
        watch: boolean;
      };
    };


export class NavigatorModel extends FieldBase {

  type = 'navigator';
  // component = Navigator;
  
  validation = [
    {
        action: "required",
        message: 'Your location cannot be read.' 
    }
  ]; 

  constructor(arr: Partial<IMap>) {
    super(arr);
  }

}

export interface IMap extends IFieldBase {
  classExample: any;
  classExampleSettings: IFieldBase;
  searchable: boolean;
  selectModel?: ISelect;
  locateable: boolean;
  navigatorModel?: any;
}

export class MapModel extends FieldBase {

  type = 'map';
  // component = Map;
  classExample = null;
  classExampleSettings = null as any;
  searchable = true;
  // selectModel = null;
  locateable = true;
  // navigatorModel = null;

  validation = []; 

  constructor(arr: Partial<IMap>) {
    super(arr);
    this.classExample = arr.classExample ?? this.classExample;
    this.classExampleSettings = arr.classExampleSettings ?? this.classExampleSettings; 
    this.searchable = arr.searchable ?? this.searchable;
    // this.selectModel = arr.selectModel ?? this.selectModel;
    this.locateable = arr.locateable ?? this.locateable;
    // this.navigatorModel = arr.navigatorModel ?? this.navigatorModel;
  }

}

export type MapContext = {
  store: any;
  results: string[];
  navigatorModel: NavigatorModel;
  // navigatorMachine: {
  //   state: Readable<any>;
  //   send: Function;
  // };
  selectModel: SelectModel;
  // selectMachine: {
  //   state: Readable<any>;
  //   send: Function;
  // };
  map: any;
  center: number[];
  // zoom: number
};

export type MapEvent =  XIO__DOM_READY |
  { type: 'CLICK' } |
  { type: 'ENTER_SELECT' } |
  { type: 'EXIT_SELECT' } |
  { type: 'SELECTED', center: number[] };