import { Meta, moduleMetadata, applicationConfig } from '@storybook/angular';
//Modules
import { GoogleMapsModule } from '@angular/google-maps';
import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { importProvidersFrom } from '@angular/core';

//Constants
import { MapConstants } from './utils/constants';

//helpers
import { MapHelper } from '../ca-map/utils/helpers';

//Components
import { CaMapComponent } from '../ca-map/ca-map.component';

//models
import { ICaMapProps } from '../ca-map/models';

const meta: Meta<CaMapComponent> = {
  title: 'Example/CarrieraMap',
  component: CaMapComponent,
  tags: ['autodocs'],
  decorators: [
    moduleMetadata({
      imports: [
        //modules
        GoogleMapsModule,
        AngularSvgIconModule.forRoot(),
        HttpClientModule,
      ],

      providers: [SvgIconRegistryService],
    }),

    applicationConfig({
      providers: [importProvidersFrom(BrowserAnimationsModule)],
    }),
  ],

  argTypes: {
    data: {
      control: { type: 'object' },
    },
  },
};

export default meta;

export const Default = (args: ICaMapProps) => ({
  props: args,
  template: `<app-ca-map [data]="data" />`,
});

Default.args = {
  data: {
    center: { lat: 41.860119, lng: -87.660156 },
    mapZoom: 1,
    markers: [
      {
        position: { lat: 41.860119, lng: -87.660156 },
        icon: {
          url: 'assets/ca-components/svg/map/marker.svg',
          labelOrigin: new google.maps.Point(90, 15),
        },
        infoWindowContent: 'chicago',
        label: {
          text: 'GRAND CENTRAL PARKING',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 90, y: 15 },
      },
      {
        position: { lat: 34.0575929993607, lng: -118.2620935496002 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_2.svg',
          labelOrigin: new google.maps.Point(80, 15),
        },
        infoWindowContent: 'Los Angeles',
        label: {
          text: 'CMA ALTAIRE OFFICE',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 80, y: 15 },
      },
      {
        position: { lat: 40.71298681021848, lng: -74.00578496193896 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_3.svg',
          labelOrigin: new google.maps.Point(85, 15),
        },
        infoWindowContent: 'New York',
        label: {
          text: 'NIAGARA BOTTLING, LLC',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 85, y: 15 },
      },
      {
        position: { lat: 36.17478769085862, lng: -115.14136650349738 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_4.svg',
          labelOrigin: new google.maps.Point(80, 15),
        },
        infoWindowContent: 'Las Vegas',
        label: {
          text: 'CMA ALTAIRE OFFICE',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 80, y: 15 },
      },
    ],
    clusterMarkers: [],
    routingMarkers: [],
    mapOptions: {
      restriction: {
        latLngBounds: MapConstants.NORTH_AMERICA_BOUNDS,
        strictBounds: true,
      },
      streetViewControl: false,
      styles: MapConstants.GOOGLE_MAP_STYLES,
      keyboardShortcuts: false,
      panControl: true,
      gestureHandling: 'greedy',
    },
  },
};

export const CustomerMap = (args: ICaMapProps) => ({
  props: args,
  template: `<app-ca-map [data]="data" />`,
});

CustomerMap.args = {
  data: {
    center: { lat: 41.860119, lng: -87.660156 },
    mapZoom: 1,
    markers: [
      {
        position: { lat: 41.860119, lng: -87.660156 },
        icon: {
          url: 'assets/ca-components/svg/map/marker.svg',
          labelOrigin: new google.maps.Point(90, 15),
        },
        infoWindowContent: 'chicago',
        label: {
          text: 'GRAND CENTRAL PARKING',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 90, y: 15 },
      },
      {
        position: { lat: 34.0575929993607, lng: -118.2620935496002 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_2.svg',
          labelOrigin: new google.maps.Point(80, 15),
        },
        infoWindowContent: 'Los Angeles',
        label: {
          text: 'CMA ALTAIRE OFFICE',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 80, y: 15 },
      },
      {
        position: { lat: 40.71298681021848, lng: -74.00578496193896 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_3.svg',
          labelOrigin: new google.maps.Point(85, 15),
        },
        infoWindowContent: 'New York',
        label: {
          text: 'NIAGARA BOTTLING, LLC',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 85, y: 15 },
      },
      {
        position: { lat: 36.17478769085862, lng: -115.14136650349738 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_4.svg',
          labelOrigin: new google.maps.Point(80, 15),
        },
        infoWindowContent: 'Las Vegas',
        label: {
          text: 'CMA ALTAIRE OFFICE',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 80, y: 15 },
      },
      {
        position: { lat: 38.51146303387095, lng: -98.45479366470849 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_5.svg',
          labelOrigin: new google.maps.Point(65, 15),
        },
        infoWindowContent: 'Kansas',
        label: {
          text: 'HEADQUARTERS',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 65, y: 15 },
      },
      {
        position: { lat: 44.58258613631277, lng: -100.40336392650106 },
        icon: { url: 'assets/ca-components/svg/map/marker_cluster_2.svg' },
        infoWindowContent: 'South Dakota',
      },
      {
        position: { lat: 47.437535433418915, lng: -100.31477892508472 },
        icon: { url: 'assets/ca-components/svg/map/marker_cluster.svg' },
        infoWindowContent: 'North Dakota',
      },
      {
        position: { lat: 33.74834637938635, lng: -84.40234127557193 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_2.svg',
          labelOrigin: new google.maps.Point(85, 15),
        },
        infoWindowContent: 'Atlanta',
        label: {
          text: 'ANTHYM LOGISTICS, LLC',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 85, y: 15 },
      },
    ],
    clusterMarkers: [],
    routingMarkers: [],
    mapOptions: {
      restriction: {
        latLngBounds: MapConstants.NORTH_AMERICA_BOUNDS,
        strictBounds: true,
      },
      streetViewControl: false,
      styles: MapConstants.GOOGLE_MAP_STYLES,
      keyboardShortcuts: false,
      panControl: true,
      gestureHandling: 'greedy',
    },
  },
};

export const CustomerDetail = (args: ICaMapProps) => ({
  props: args,
  template: `<app-ca-map [data]="data" />`,
});
CustomerDetail.args = {
  data: {
    center: { lat: 41.860119, lng: -87.660156 },
    mapZoom: 1,
    markers: [
      {
        position: { lat: 42.27024761010675, lng: -89.11244080153143 },
        icon: {
          url: 'assets/ca-components/svg/map/marker.svg',
          labelOrigin: new google.maps.Point(80, 15),
        },
        infoWindowContent: 'Rockford',
        labelOrigin: { x: 80, y: 15 },
      },
    ],
    clusterMarkers: [],
    routingMarkers: [],
    mapOptions: {
      restriction: {
        latLngBounds: MapConstants.NORTH_AMERICA_BOUNDS,
        strictBounds: true,
      },
      streetViewControl: false,
      styles: MapConstants.GOOGLE_MAP_STYLES,
      keyboardShortcuts: false,
      panControl: true,
      gestureHandling: 'greedy',
    },
  },
};

export const RoutingMap = (args: ICaMapProps) => ({
  props: args,
  template: `<app-ca-map [data]="data" />`,
});
RoutingMap.args = {
  data: {
    center: { lat: 41.860119, lng: -87.660156 },
    mapZoom: 1,
    mapOptions: {
      restriction: {
        latLngBounds: MapConstants.NORTH_AMERICA_BOUNDS,
        strictBounds: true,
      },
      streetViewControl: false,
      styles: MapConstants.GOOGLE_MAP_STYLES,
      keyboardShortcuts: false,
      panControl: true,
      gestureHandling: 'greedy',
    },
    markers: [],
    clusterMarkers: [],
    routingMarkers: [
      {
        position: { lat: 44.03585152778617, lng: -97.14573989406038 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_dot.svg',
          labelOrigin: new google.maps.Point(90, 15),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 43.62372597370575, lng: -92.66331812983142 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_dot_2.svg',
          labelOrigin: new google.maps.Point(80, 15),
        },
        infoWindowContent: 'Los Angeles',
      },
      {
        position: { lat: 40.82584014833117, lng: -85.80784954924596 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_dot.svg',
          labelOrigin: new google.maps.Point(85, 15),
        },
        infoWindowContent: 'New York',
      },
      {
        position: { lat: 41.91410837532627, lng: -87.65355262863436 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_dot_2.svg',
          labelOrigin: new google.maps.Point(80, 15),
        },
        infoWindowContent: 'Las Vegas',
      },
    ],
    routePaths: [
      {
        path: [
          { lat: 44.03585152778617, lng: -97.14573989406038 },
          { lat: 43.62372597370575, lng: -92.66331812983142 },
        ],
        strokeColor: '#DF3C3C',
      },
      {
        path: [
          { lat: 43.62372597370575, lng: -92.66331812983142 },
          { lat: 40.82584014833117, lng: -85.80784954924596 },
        ],
        strokeColor: '#DF3C3C',
      },
      {
        path: [
          { lat: 40.82584014833117, lng: -85.80784954924596 },
          { lat: 41.91410837532627, lng: -87.65355262863436 },
        ],
        strokeColor: '#DF3C3C',
      },
    ],
  },
};

export const Telematic = (args: ICaMapProps) => ({
  props: args,
  template: `<app-ca-map [data]="data" />`,
});
Telematic.args = {
  data: {
    center: { lat: 38.33530997773705, lng: -92.36284537573471 },
    mapZoom: 7,
    mapOptions: {
      restriction: {
        latLngBounds: MapConstants.NORTH_AMERICA_BOUNDS,
        strictBounds: true,
      },
      streetViewControl: false,
      styles: MapConstants.GOOGLE_MAP_STYLES,
      keyboardShortcuts: false,
      panControl: true,
      gestureHandling: 'greedy',
    },
    markers: [
      {
        position: { lat: 41.1146501805762, lng: -94.39531595733288 },
        icon: {
          url: 'assets/ca-components/svg/map/telematic_marker.svg',
          labelOrigin: new google.maps.Point(90, 15),
        },
        infoWindowContent: 'chicago',
        label: {
          text: 'GRAND CENTRAL PARKING',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 90, y: 15 },
      },

      {
        position: { lat: 41.1146501805762, lng: -90.05571656615396 },
        icon: {
          url: 'assets/ca-components/svg/map/telematic_marker_1.svg',
          labelOrigin: new google.maps.Point(90, 15),
        },
        infoWindowContent: 'chicago',
        label: {
          text: 'F32533 A.Djordjevic',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 90, y: 15 },
      },

      {
        position: { lat: 38.696344836490034, lng: -86.72685901170395 },
        icon: {
          url: 'assets/ca-components/svg/map/telematic_marker.svg',
          labelOrigin: new google.maps.Point(90, 15),
        },
        infoWindowContent: 'chicago',
        label: {
          text: '8452B Micheal Scott',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 90, y: 15 },
      },

      {
        position: { lat: 38.573272453877756, lng: -87.75241178565773 },
        icon: {
          url: 'assets/ca-components/svg/map/telematic_marker_1.svg',
          labelOrigin: new google.maps.Point(90, 15),
        },
        infoWindowContent: 'chicago',
        label: {
          text: 'GRAND CENTRAL PARKING',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 90, y: 15 },
      },

      {
        position: { lat: 36.28395352238037, lng: -88.37477171054384 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_5.svg',
          labelOrigin: new google.maps.Point(90, 15),
        },
        infoWindowContent: 'chicago',
        label: {
          text: 'GRAND CENTRAL PARKING',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 90, y: 15 },
      },

      {
        position: { lat: 35.52067452608985, lng: -91.97773356751634 },
        icon: {
          url: 'assets/ca-components/svg/map/telematic_marker_1.svg',
          labelOrigin: new google.maps.Point(90, 15),
        },
        infoWindowContent: 'chicago',
        label: {
          text: 'GRAND CENTRAL PARKING',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 90, y: 15 },
      },

      {
        position: { lat: 37.4736704539441, lng: -95.91327664978384 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_3.svg',
          labelOrigin: new google.maps.Point(90, 15),
        },
        infoWindowContent: 'chicago',
        label: {
          text: 'GRAND CENTRAL PARKING',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 90, y: 15 },
      },
    ],
    routingMarkers: [
      {
        position: { lat: 41.58527648118903, lng: -87.44525910453532 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_dot.svg',
          labelOrigin: new google.maps.Point(90, 15),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 39.820329022129094, lng: -89.62085275047427 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_dot_2.svg',
          labelOrigin: new google.maps.Point(80, 15),
        },
        infoWindowContent: 'Los Angeles',
      },
      {
        position: { lat: 38.657224243000385, lng: -90.22661168417964 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_dot_2.svg',
          labelOrigin: new google.maps.Point(80, 15),
        },
        infoWindowContent: 'Los Angeles',
      },
      {
        position: { lat: 38.1365295594794, lng: -91.90137314733873 },
        icon: {
          url: 'assets/ca-components/svg/map/telematic_marker_2.svg',
          labelOrigin: new google.maps.Point(80, 15),
        },
        infoWindowContent: 'Los Angeles',
      },
      {
        position: { lat: 36.42306732800619, lng: -93.5992213578992 },
        icon: {
          url: 'assets/ca-components/svg/map/telematic_marker_2.svg',
          labelOrigin: new google.maps.Point(80, 15),
        },
        infoWindowContent: 'Los Angeles',
      },
    ],
    routePaths: [
      {
        path: [
          { lat: 41.58527648118903, lng: -87.44525910453532 },
          { lat: 39.820329022129094, lng: -89.62085275047427 },
        ],
        strokeColor: '#3B73ED',
      },
      {
        path: [
          { lat: 39.820329022129094, lng: -89.62085275047427 },
          { lat: 38.657224243000385, lng: -90.22661168417964 },
        ],
        strokeColor: '#3B73ED',
      },
      {
        path: [
          { lat: 38.657224243000385, lng: -90.22661168417964 },
          { lat: 38.1365295594794, lng: -91.90137314733873 },
        ],
        strokeColor: '#2F2F2F',
      },
      {
        path: [
          { lat: 38.1365295594794, lng: -91.90137314733873 },
          { lat: 36.42306732800619, lng: -93.5992213578992 },
        ],
        strokeColor: '#2F2F2F',
      },
    ],
  },
};

export const AccidentMap = (args: ICaMapProps) => ({
  props: args,
  template: `<app-ca-map [data]="data" />`,
});

AccidentMap.args = {
  data: {
    center: { lat: 38.33530997773705, lng: -92.36284537573471 },
    mapZoom: 7,
    isAccidentMap: true,
    markers: [
      {
        position: { lat: 39.78965859863565, lng: -89.68218110331875 },
        icon: {
          url: 'assets/ca-components/svg/map/marker.svg',
          labelOrigin: new google.maps.Point(65, 15),
        },
        infoWindowContent: 'illinois',
        label: {
          text: 'GRAND CENTRAL PARKING',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 90, y: 15 },
      },
      {
        position: { lat: 37.22825987104784, lng: -93.3076692982325 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_cluster.svg',
          labelOrigin: new google.maps.Point(105, 25),
        },
        infoWindowContent: 'Lebanon',
        label: {
          text: 'CMA ALTAIRE OFFICE',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 80, y: 15 },
      },
      {
        position: { lat: 40.017211664155, lng: -93.20879234755098 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_3.svg',
          labelOrigin: new google.maps.Point(85, 15),
        },
        infoWindowContent: 'Qionon',
        label: {
          text: 'NIAGARA BOTTLING, LLC',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 85, y: 15 },
      },
      {
        position: { lat: 37.82075026897496, lng: -87.11138038885717 },
        icon: {
          url: 'assets/ca-components/svg/map/cluster_marker_6.svg',
          labelOrigin: new google.maps.Point(105, 25),
        },
        infoWindowContent: 'Owensoboro',
        label: {
          text: 'CMA ALTAIRE OFFICE',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 80, y: 15 },
      },
      {
        position: { lat: 40.43660850172779, lng: -86.84770851711512 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_4.svg',
          labelOrigin: new google.maps.Point(65, 15),
        },
        infoWindowContent: 'Lafavette',
        label: {
          text: 'HEADQUARTERS',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 65, y: 15 },
      },
      {
        position: { lat: 41.52308450623608, lng: -90.55010100374544 },
        icon: { url: 'assets/ca-components/svg/map/marker_cluster_2.svg' },
        infoWindowContent: 'Devenport',
      },
      {
        position: { lat: 41.22629505876742, lng: -89.13286471064364 },
        icon: {
          url: 'assets/ca-components/svg/map/marker.svg',
          labelOrigin: new google.maps.Point(65, 15),
        },
        infoWindowContent: '2 injuries',
        label: {
          text: 'ANTHYM LOGISTICS, LLC',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 85, y: 15 },
      },
      {
        position: { lat: 41.34187408035947, lng: -94.73589191592984 },
        icon: {
          url: 'assets/ca-components/svg/map/marker.svg',
          labelOrigin: new google.maps.Point(65, 15),
        },
        infoWindowContent: '2 vechicles',
        label: {
          text: 'ANTHYM LOGISTICS, LLC',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 85, y: 15 },
      },
      {
        position: { lat: 37.34189370994474, lng: -95.18633135792344 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_5.svg',
          labelOrigin: new google.maps.Point(85, 15),
        },
        infoWindowContent: 'pitsburg',
        label: {
          text: 'CMA ALTAiRA OFFICE',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 85, y: 15 },
      },
      {
        position: { lat: 34.36850063192456, lng: -94.36235676646729 },
        icon: {
          url: 'assets/ca-components/svg/map/marker.svg',
          labelOrigin: new google.maps.Point(65, 15),
        },
        infoWindowContent: '4 injuries',
        label: {
          text: 'AL270000086',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 85, y: 15 },
      },
      {
        position: { lat: 36.7103846224748, lng: -91.6047884752382 },
        icon: {
          url: 'assets/ca-components/svg/map/marker.svg',
          labelOrigin: new google.maps.Point(65, 15),
        },
        infoWindowContent: 'popular bluff',
        label: {
          text: 'AL270000086',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 85, y: 15 },
      },
      {
        position: { lat: 35.15372169338256, lng: -90.07768890360136 },
        icon: {
          url: 'assets/ca-components/svg/map/cluster_marker_4.svg',
          labelOrigin: new google.maps.Point(85, 25),
        },
        infoWindowContent: 'Memphis',
        label: {
          text: 'AL270000086',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 85, y: 15 },
      },
      {
        position: { lat: 36.1712598046251, lng: -85.47441753298388 },
        icon: {
          url: 'assets/ca-components/svg/map/marker.svg',
          labelOrigin: new google.maps.Point(65, 15),
        },
        infoWindowContent: 'CookieVille',
        label: {
          text: 'AL270000086',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 85, y: 15 },
      },
      {
        position: { lat: 39.73054001983854, lng: -96.21904617370919 },
        icon: {
          url: 'assets/ca-components/svg/map/marker.svg',
          labelOrigin: new google.maps.Point(65, 15),
        },
        infoWindowContent: 'Manhattan',
        label: {
          text: 'AL270000086',
          fontSize: '10px',
          color: 'grey',
          fontWeight: '400',
        },
        labelOrigin: { x: 85, y: 15 },
      },
    ],
    clusterMarkers: [],
    routingMarkers: [],
    mapOptions: {
      restriction: {
        latLngBounds: MapConstants.NORTH_AMERICA_BOUNDS,
        strictBounds: true,
      },
      streetViewControl: false,
      styles: MapConstants.GOOGLE_MAP_STYLES,
      keyboardShortcuts: false,
      panControl: true,
      gestureHandling: 'greedy',
    },
  },
};

export const AccidentDetail = (args: ICaMapProps) => ({
  props: args,
  template: `<app-ca-map [data]="data" />`,
});

AccidentDetail.args = {
  data: {
    center: { lat: 38.33530997773705, lng: -92.36284537573471 },
    mapZoom: 7,
    mapOptions: {
      restriction: {
        latLngBounds: MapConstants.NORTH_AMERICA_BOUNDS,
        strictBounds: true,
      },
      streetViewControl: false,
      styles: MapConstants.GOOGLE_MAP_STYLES,
      keyboardShortcuts: false,
      panControl: true,
      gestureHandling: 'greedy',
    },

    routingMarkers: [
      {
        position: { lat: 38.10658347407844, lng: -96.07073074768687 },
        icon: {
          url: 'assets/ca-components/svg/map/telematic_marker_2.svg',
          labelOrigin: new google.maps.Point(-25, 15),
        },
        infoWindowContent: 'PlainField IN',
        label: {
          text: 'PlainField IN',
          fontSize: '10px',
          color: 'black',
          fontWeight: '400',
        },
        labelOrigin: { x: -25, y: 15 },
      },
      {
        position: { lat: 38.11819939128054, lng: -91.57093332653679 },
        icon: {
          url: 'assets/ca-components/svg/map/marker.svg',
          labelOrigin: new google.maps.Point(-25, 15),
          scaledSize: new google.maps.Size(50, 50),
        },
        infoWindowContent: 'Chicago, IL',
        label: {
          text: 'Chicago, IL',
          fontSize: '10px',
          color: 'black',
          fontWeight: '400',
        },
        labelOrigin: { x: 90, y: 15 },
      },
      {
        position: { lat: 37.97749303861111, lng: -87.5934577806551 },
        icon: {
          url: 'assets/ca-components/svg/map/marker_dot.svg',
          labelOrigin: new google.maps.Point(-25, 15),
        },
        infoWindowContent: 'Evansville',
        label: {
          text: 'Evansville',
          fontSize: '10px',
          color: 'black',
          fontWeight: '400',
        },
        labelOrigin: { x: 90, y: 15 },
      },
    ],
    routePaths: [
      {
        path: [
          { lat: 38.10658347407844, lng: -96.07073074768687 },
          { lat: 38.11819939128054, lng: -91.57093332653679 },
        ],
        strokeColor: '#424242',
      },
      {
        path: [
          { lat: 38.11819939128054, lng: -91.57093332653679 },
          { lat: 37.97749303861111, lng: -87.5934577806551 },
        ],
        strokeColor: '#424242',
      },
    ],
  },
};

export const fleetView = (args: ICaMapProps) => ({
  props: args,
  template: `<app-ca-map [data]="data" />`,
});

fleetView.args = {
  data: {
    center: { lat: 41.860119, lng: -87.660156 },
    mapZoom: 1,
    mapOptions: {
      restriction: {
        latLngBounds: MapConstants.NORTH_AMERICA_BOUNDS,
        strictBounds: true,
      },
      streetViewControl: false,
      styles: MapConstants.GOOGLE_MAP_STYLES,
      keyboardShortcuts: false,
      panControl: true,
      gestureHandling: 'greedy',
    },
    stateBoundariesUrl: { url: 'json/usa-states.json' },
    view: 'fleetView',
  },
};

export const UnitView = (args: ICaMapProps) => ({
  props: args,
  template: `<app-ca-map [data]="data" />`,
});

UnitView.args = {
  data: {
    center: { lat: 41.860119, lng: -87.660156 },
    mapZoom: 1,
    mapOptions: {
      restriction: {
        latLngBounds: MapConstants.NORTH_AMERICA_BOUNDS,
        strictBounds: true,
      },
      streetViewControl: false,
      styles: MapConstants.GOOGLE_MAP_STYLES,
      keyboardShortcuts: false,
      panControl: true,
      gestureHandling: 'greedy',
    },
    stateBoundariesUrl: { url: 'json/usa-states.json' },
    view: 'unitView',
  },
};

export const UnitViewStops = (args: ICaMapProps) => ({
  props: args,
  template: `<app-ca-map [data]="data" />`,
});

UnitViewStops.args = {
  data: {
    center: { lat: 39.75111786787438, lng: -102.71911630392317 },
    mapZoom: 1,
    mapOptions: {
      restriction: {
        latLngBounds: MapConstants.NORTH_AMERICA_BOUNDS,
        strictBounds: true,
      },
      streetViewControl: false,
      styles: MapConstants.GOOGLE_MAP_STYLES,
      keyboardShortcuts: false,
      panControl: true,
      gestureHandling: 'greedy',
    },
    isUnitViewStops: true,
    routingMarkers: [
      {
        position: { lat: 44.596673903957985, lng: -106.06041530422135 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#64B5F6', 1),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 44.83955876095615, lng: -101.27501503808244 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('black', 2),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 41.695513544794785, lng: -85.08544660523592 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 3),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 44.72928294320169, lng: -85.45833493766233 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 4),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 43.457253943423076, lng: -93.41328602942569 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#EF5350', 5),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 39.64530327216714, lng: -95.83706019019735 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('black', 6),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 41.83457889491565, lng: -103.0462346171079 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 7),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 40.264610347291, lng: -105.84289711030594 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 8),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 40.972212783439744, lng: -107.55196863392698 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 9),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 39.020399397896945, lng: -109.69607654537883 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 10),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 35.66154828614495, lng: -106.99263613528737 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 11),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 38.63307178975892, lng: -104.66208405762232 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 12),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 33.82323837102159, lng: -97.17324338139198 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 13),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 29.29759557021139, lng: -90.67877158395294 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 14),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 35.10418957227141, lng: -90.02621700220674 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('black', 15),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 33.46106557993529, lng: -78.96386310643523 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#FFA726', 16),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 35.7120259686818, lng: -78.31130852468901 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#AB47BC', 17),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 39.50159051610844, lng: -76.63331102877018 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#EF5350', 18),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 38.875398435773114, lng: -74.48920311731834 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#3074D3', 19),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 40.193438107979624, lng: -75.48357200378875 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 20),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 44.44157997440305, lng: -73.18409390544748 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 21),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 47.35990286306837, lng: -74.79994334596192 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 22),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 43.99618001183207, lng: -78.24916042090618 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 23),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 42.0426115341692, lng: -69.237692387268 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 24),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 43.9066957950327, lng: -63.45792305727124 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 25),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 46.74594099053962, lng: -65.63310499488945 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 26),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 46.95845050482717, lng: -63.61329319424642 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 27),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 46.95845050482717, lng: -63.61329319424642 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 28),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 50.38357955380358, lng: -68.2122493003154 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 29),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 52.0571109983643, lng: -78.06271608191298 },
        icon: {
          url: MapHelper.getIconForUnitViewStops('#26A690', 30),
        },
        infoWindowContent: 'chicago',
      },
    ],

    routePaths: [
      {
        path: [
          { lat: 44.596673903957985, lng: -106.06041530422135 },
          { lat: 44.83955876095615, lng: -101.27501503808244 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 44.83955876095615, lng: -101.27501503808244 },
          { lat: 41.695513544794785, lng: -85.08544660523592 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 41.695513544794785, lng: -85.08544660523592 },
          { lat: 44.72928294320169, lng: -85.45833493766233 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 44.72928294320169, lng: -85.45833493766233 },
          { lat: 43.457253943423076, lng: -93.41328602942569 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 43.457253943423076, lng: -93.41328602942569 },
          { lat: 39.64530327216714, lng: -95.83706019019735 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 39.64530327216714, lng: -95.83706019019735 },
          { lat: 41.83457889491565, lng: -103.0462346171079 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 41.83457889491565, lng: -103.0462346171079 },
          { lat: 40.264610347291, lng: -105.84289711030594 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 40.264610347291, lng: -105.84289711030594 },
          { lat: 40.972212783439744, lng: -107.55196863392698 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 40.972212783439744, lng: -107.55196863392698 },
          { lat: 39.020399397896945, lng: -109.69607654537883 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 39.020399397896945, lng: -109.69607654537883 },
          { lat: 35.66154828614495, lng: -106.99263613528737 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 35.66154828614495, lng: -106.99263613528737 },
          { lat: 38.63307178975892, lng: -104.66208405762232 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 38.63307178975892, lng: -104.66208405762232 },
          { lat: 33.82323837102159, lng: -97.17324338139198 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 33.82323837102159, lng: -97.17324338139198 },
          { lat: 29.29759557021139, lng: -90.67877158395294 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 29.29759557021139, lng: -90.67877158395294 },
          { lat: 35.10418957227141, lng: -90.02621700220674 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 35.10418957227141, lng: -90.02621700220674 },
          { lat: 33.46106557993529, lng: -78.96386310643523 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 33.46106557993529, lng: -78.96386310643523 },
          { lat: 35.7120259686818, lng: -78.31130852468901 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 35.7120259686818, lng: -78.31130852468901 },
          { lat: 39.50159051610844, lng: -76.63331102877018 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 39.50159051610844, lng: -76.63331102877018 },
          { lat: 38.875398435773114, lng: -74.48920311731834 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 38.875398435773114, lng: -74.48920311731834 },
          { lat: 40.193438107979624, lng: -75.48357200378875 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 40.193438107979624, lng: -75.48357200378875 },
          { lat: 44.44157997440305, lng: -73.18409390544748 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 44.44157997440305, lng: -73.18409390544748 },
          { lat: 47.35990286306837, lng: -74.79994334596192 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 47.35990286306837, lng: -74.79994334596192 },
          { lat: 43.99618001183207, lng: -78.24916042090618 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 43.99618001183207, lng: -78.24916042090618 },
          { lat: 42.0426115341692, lng: -69.237692387268 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 42.0426115341692, lng: -69.237692387268 },
          { lat: 43.9066957950327, lng: -63.45792305727124 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 43.9066957950327, lng: -63.45792305727124 },
          { lat: 46.74594099053962, lng: -65.63310499488945 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 46.74594099053962, lng: -65.63310499488945 },
          { lat: 46.95845050482717, lng: -63.61329319424642 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 46.95845050482717, lng: -63.61329319424642 },
          { lat: 46.95845050482717, lng: -63.61329319424642 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 46.95845050482717, lng: -63.61329319424642 },
          { lat: 50.38357955380358, lng: -68.2122493003154 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 50.38357955380358, lng: -68.2122493003154 },
          { lat: 52.0571109983643, lng: -78.06271608191298 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
    ],
  },
};

export const DriverMiles = (args: ICaMapProps) => ({
  props: args,
  template: `<app-ca-map [data]="data" />`,
});

DriverMiles.args = {
  data: {
    center: { lat: 39.75111786787438, lng: -102.71911630392317 },
    mapZoom: 1,
    mapOptions: {
      restriction: {
        latLngBounds: MapConstants.NORTH_AMERICA_BOUNDS,
        strictBounds: true,
      },
      streetViewControl: false,
      styles: MapConstants.GOOGLE_MAP_STYLES,
      keyboardShortcuts: false,
      panControl: true,
      gestureHandling: 'greedy',
    },
    isDriverMiles: true,
    routingMarkers: [
      {
        position: { lat: 36.201725932744644, lng: -115.06774850733663 },
        icon: {
          url: MapHelper.getIconForDriveMiles('#FF8080', 0),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 38.7129419725362, lng: -110.89294392300573 },
        icon: {
          url: MapHelper.getIconForDriveMiles('#3BCBAE', 1),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 39.768009151380134, lng: -108.65173304089127 },
        icon: {
          url: MapHelper.getIconForDriveMiles('#3BCBAE', 2),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 40.37332787592042, lng: -100.65368636354155 },
        icon: {
          url: MapHelper.getIconForDriveMiles('#FF6A6A', 1),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 39.53115621449004, lng: -97.66540518738893 },
        icon: {
          url: MapHelper.getIconForDriveMiles('#FF6A6A', 2),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 37.223324960939216, lng: -99.99450669233141 },
        icon: {
          url: MapHelper.getIconForDriveMiles('#FF6A6A', 3),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 36.27261647696407, lng: -108.34411586099321 },
        icon: {
          url: MapHelper.getIconForDriveMiles('#B389BF', 'R'),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 33.86311236010934, lng: -101.53259259182175 },
        icon: {
          url: MapHelper.getIconForDriveMiles('#B389BF', 1),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 38.7129419725362, lng: -94.7210693226503 },
        icon: {
          url: MapHelper.getIconForDriveMiles('#FF6A6A', 4),
        },
        infoWindowContent: 'chicago',
      },
      {
        position: { lat: 42.124297962879595, lng: -92.08435063780972 },
        icon: {
          url: MapHelper.getIconForDriveMiles('#FF6A6A', 1),
        },
        infoWindowContent: 'chicago',
      },
    ],

    routePaths: [
      {
        path: [
          { lat: 36.201725932744644, lng: -115.06774850733663 },
          { lat: 38.7129419725362, lng: -110.89294392300573 },
        ],
        strokeColor: '#DADADA',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 38.7129419725362, lng: -110.89294392300573 },
          { lat: 39.768009151380134, lng: -108.65173304089127 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 39.768009151380134, lng: -108.65173304089127 },
          { lat: 40.37332787592042, lng: -100.65368636354155 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 40.37332787592042, lng: -100.65368636354155 },
          { lat: 39.53115621449004, lng: -97.66540518738893 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 39.53115621449004, lng: -97.66540518738893 },
          { lat: 37.223324960939216, lng: -99.99450669233141 },
        ],
        strokeColor: '#DADADA',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 37.223324960939216, lng: -99.99450669233141 },
          { lat: 36.27261647696407, lng: -108.34411586099321 },
        ],
        strokeColor: '#DADADA',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 36.27261647696407, lng: -108.34411586099321 },
          { lat: 33.86311236010934, lng: -101.53259259182175 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 33.86311236010934, lng: -101.53259259182175 },
          { lat: 38.7129419725362, lng: -94.7210693226503 },
        ],
        strokeColor: '#DADADA',
        strokeOpacity: 1,
      },
      {
        path: [
          { lat: 38.7129419725362, lng: -94.7210693226503 },
          { lat: 42.124297962879595, lng: -92.08435063780972 },
        ],
        strokeColor: '#919191',
        strokeOpacity: 1,
      },
    ],
  },
};