/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useState, useEffect } from 'react';
import * as atlas from 'azure-maps-control';
import client from '../classes/eventEmit';
import { AuthenticationType } from 'azure-maps-control';
import numeral from 'numeral';
import moment from 'moment';
import 'moment/min/locales';
import Icons from '../utils/iconsUtils';
import { getNavigatorLanguage } from '../utils/dateFormatUtils';
import './mapContainer.css';
import { Legend } from 'highcharts';


export interface IMapContainer {
  style?:
    | 'blank'
    | 'blank_accessible'
    | 'high_contrast_dark'
    | 'grayscale_dark'
    | 'grayscale_light'
    | 'night'
    | 'road'
    | 'road_shaded_relief'
    | 'satellite'
    | 'satellite_road_labels';
  containerStyle?: Record<string, string | number>;
  subscriptionKey?: string;
  children?: (map: atlas.Map | undefined) => React.ReactElement;
  updateWhileMoving?: boolean;
  accessToken?: string;
  getCoordinates?: any;
  onClick?:any;
 
}

export const MapContainer: React.FC<IMapContainer> = (props: IMapContainer) => {
  const { style, containerStyle, subscriptionKey, updateWhileMoving, getCoordinates, children } = props;
  const [map, setMap] = useState<atlas.Map | undefined>();

  // const defaultColor = '#00ff80';
  // const colorScale: any = [
  //   10, '#27AE60',
  //   20, '#9FD85C',
  //   50, '#C8E65A',
  //   100, '#DFE85D',
  //   200, '#E7C052',
  //   500, '#EB8F4C',
  //   1000, '#EF4242'
  // ];

        
        //Link to shape boundaries. Note I'm using a CORs proxy for this example. For security, you should host this data in your site on the same domain.
        var stateBoundaries = 'https://corsproxy.io/?https://samples.azuremaps.com/data/geojson/US_States_500k.json';
        var styles = {
        
          //A linear interpolation on cost from 0 (green) to 100+ (red), with the mid-point (50) being yellow.
          cost: [
              'interpolate',
              ['linear'],
              ['get', 'cost'],    //Grab the `cost` metric from the shapes properties.
              0, 'green',
              50, 'yellow',
              100, 'red'
          ],
      
          //A stepped color scale of ranges. 
          orderSize: [
              'step',
              ['get', 'orderSize'],    //Grab the `orderSize` metric from the shapes properties.
              'blue',            //<1
              1, '#a6cee3',    //1 - 2
              2, '#1f78b4',    //2 - 3
              3, '#b2df8a',    //3 - 4
              4, '#33a02c',    //4 - 5
              5, '#fb9a99',    //5 - 6
              6, '#e31a1c',    //6 - 7
              7, '#fdbf6f',    //7 - 8
              8, '#ff7f00',    //8 - 9
              9, '#cab2d6',    //9 - 10
              10, '#6a3d9a'    //10>
          ],
          
          //A linear interpolation on the sub-optimal shipment percentage from 0 (green) to 1+ (red), with the mid-point (0.5) being yellow.
          suboptimal: [
              'interpolate',
              ['linear'],
              ['get', 'suboptimal'], //Grab the `suboptimal` metric from the shapes properties.
              0, 'green',
              0.5, 'yellow',
              1, 'red'
          ]
      };

  useEffect(() => {
    if (subscriptionKey) {
        const azureMap: atlas.Map = new window.atlas.Map(`map-${subscriptionKey}-canvas`, {
        center: getCoordinates[0],
        zoom: getCoordinates[1],
        view: 'Auto',
        language: 'en-US',
        authOptions: {
          authType: AuthenticationType.subscriptionKey,
          subscriptionKey,
        },
        showLogo: false,
        dragRotateInteraction: false,
        style,
      });

      setMap(azureMap);
    }
  }, [style, subscriptionKey, getCoordinates]);

  useEffect(() => {
    
    if (map) {
      if (updateWhileMoving) {
        map.events.add('moveend', () => {
          client.emit('moveend');
        });
      }

      map.events.add('ready', function() {
        /*Create a data source and add it to the map*/
        const dataSource = new atlas.source.DataSource();
        map.sources.add(dataSource);
      
        //  dataSource.importDataFromUrl('https://samples.azuremaps.com/data/geojson/US_States_Population_Density.json');
        dataSource.importDataFromUrl(stateBoundaries).then(joinMetrics);

       const  polygonLayer = new atlas.layer.PolygonLayer(dataSource);
           map.layers.add(polygonLayer);

         
      
        //Create a stepped expression based on the color scale. 
        // let steppedExp: any = [
        //   'step',
        //   ['get', 'density'],
        //   defaultColor
        // ];
        // steppedExp = steppedExp.concat(colorScale);

         function setMetric(metric){
            //Update the fill color style option based on the metric.
            polygonLayer.setOptions({ fillColor: styles[metric] });
        }
        
        function joinMetrics() {
          dataSource.getShapes().forEach(state => {
                //Cross reference the state shapes with the metrics using the states NAME property.
                //Join the metrics with the state shapes properties.
                var props = state.getProperties();
                Object.assign(props, metrics[props.NAME]);
                state.setProperties(props);
            });
        }
      
        //Create and add a polygon extrusion layer to the map below the labels so that they are still readable.
        // map.layers.add(new atlas.layer.PolygonExtrusionLayer(dataSource, (null || ''), {
        //   fillColor: steppedExp
        // }), 'labels');

       

        // if (!map.imageSprite.hasImage('circle')) {
        //   map.imageSprite.add('circle', Icons.raw.circle);
        //   map.imageSprite.createFromTemplate('pinRound', 'pin-round');
        // } 
      });

      


    }
    

    moment.locale(getNavigatorLanguage(window.navigator));
    numeral.locale(getNavigatorLanguage(window.navigator));
  })



  return (
    <div>
    <div
      id={`map-${subscriptionKey}-canvas`}
      
      data-testid={`map`}
      style={{
        minHeight: '100%',
        minWidth: '100%',
        position: 'relative',
        ...containerStyle,
      }}
    >
      {children && children(map)}
    </div>
      <div>
      <button onclick="setMetric('cost')">Cost per Shipment</button>
        <button onclick="setMetric('orderSize')">Shipments per order</button>
        <button onclick="setMetric('suboptimal')">Sub-optimal Shipments</button>
      </div>
    
    </div>
   
  );
}