import { useEffect, useState, createContext } from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Geocode from 'react-geocode';
import { PersistGate } from 'redux-persist/integration/react';
import './index.css';
import { theme } from './theme';
import { ThemeProvider } from '@mui/material';
import { persistStore } from 'redux-persist';
import { SnackbarProvider } from 'notistack';
import { BrowserRouter, useLocation } from 'react-router-dom';
import axios from 'axios';
import { chain } from 'lodash';
import FirestoreService from './firebase/firestoreService';
import 'react-image-gallery/styles/css/image-gallery.css';
import React from 'react';
import { HelmetProvider } from 'react-helmet-async';

export const LocationContext = createContext({});
const GOOGLE_MAPS_API_KEY = 'AIzaSyCYvGaux5OQXLEDgM3mE0fiPKlaQm2f8-o';

function loadScript(src: string, position: HTMLElement | null, id: string) {
  if (!position) {
    return;
  }

  const script = document.createElement('script');
  script.setAttribute('async', '');
  script.setAttribute('id', id);
  script.src = src;
  position.appendChild(script);
}
let persistor = persistStore(store);

const container = document.getElementById('root')!;
const Contain = () => {
  const [newTheme] = useState(theme);
  useEffect(() => {
    // Only modify title on development/testing builds, not on production
    if (import.meta.env.VITE_PROJECT_ID !== 'maadiveeduvas' && import.meta.env.DEV) {
      const originalTitle = document.title;
      if (!originalTitle.includes('*TESTING*')) {
        document.title = `*TESTING* - ${originalTitle}`;
      }
    }
  }, []);
  const loaded = React.useRef(false);

  if (typeof window !== 'undefined' && !loaded.current) {
    if (!document.querySelector('#google-maps')) {
      loadScript(
        `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places`,
        document.querySelector('head'),
        'google-maps'
      );
    }

    loaded.current = true;
  }

  return (
    <ThemeProvider theme={newTheme}>
      <SnackbarProvider maxSnack={3}>
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
            <HelmetProvider>
              <BrowserRouter>
                <LocationWrapper />
              </BrowserRouter>
            </HelmetProvider>
          </PersistGate>
        </Provider>
      </SnackbarProvider>
    </ThemeProvider>
  );
};

const LocationWrapper = () => {
  const [location, setLocation] = useState({
    city: '',
    state: '',
    stateCode: '',
  });
  const [nearBy, setNearby] = useState<any>([]);
  const updateNearby = (lat, long) => {
    FirestoreService.getLocationBounds([lat, long]).then((data) => {
      const filteredLocations = chain(data)
        .countBy('locality')
        .map(function (count, locality) {
          return { count: count, locality: locality };
        })
        .sortBy('count', 'desc')
        .value();
      setNearby(filteredLocations?.slice(-5));
    });
  };
  const locationDOM = useLocation();

  useEffect(() => {
    if (window?.location?.pathname === '/landing' && !location.city) {
      axios.get('https://ipapi.co/json/').then((response) => {
        if (response.data.country_code === 'IN') {
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
              (position) => {
                const latitude = position?.coords?.latitude;
                const longitude = position?.coords?.longitude;
                Geocode?.fromLatLng(
                  latitude?.toString(),
                  longitude?.toString()
                ).then((response: any) => {
                  const address = response?.results?.[0]?.address_components;

                  let findCity;
                  let findState;
                  address.forEach((cities) => {
                    const citiesType = cities?.types;

                    if (citiesType?.includes('administrative_area_level_3')) {
                      findCity = cities?.long_name;
                    } else if (
                      citiesType?.includes('administrative_area_level_1')
                    ) {
                      //
                      findState = cities;
                    }
                  });

                  // const findCity = address?.find((result) =>
                  //   result?.types?.includes("administrative_area_level_3")
                  // )?.short_name;

                  // const findState = address.find((result) =>
                  //   result?.types?.includes("administrative_area_level_1")
                  // );

                  setLocation({
                    city: findCity,
                    state: findState?.long_name,
                    stateCode: findState?.short_name,
                  });

                  updateNearby(latitude, longitude);
                });
              },
              (error) => {
                if (error.message) {
                  const findCity = response?.data;
                  setLocation({
                    city: findCity?.city,
                    state: findCity?.region,
                    stateCode: findCity?.region_code,
                  });
                  updateNearby(findCity?.latitude, findCity?.longitude);
                }
              }
            );
          }
        }
      });
    }
  }, [locationDOM.pathname]);
  return (
    <LocationContext.Provider
      value={{
        nearBy,
        location,
      }}
    >
      <App />
    </LocationContext.Provider>
  );
};
const root = createRoot(container);

root.render(<Contain></Contain>);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();