import {
  IonApp,
  IonButtons,
  IonContent,
  IonFooter,
  IonHeader,
  IonToolbar,
  setupIonicReact,
} from '@ionic/react';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';
import LiveMap from './components/map/LiveMap';

import { atom, useAtom } from 'jotai';
import { atomWithHash } from 'jotai/utils';
import { MapScope } from './components/map/types';
import { debounce } from 'lodash';
import GetLocation from './components/buttons/GetLocation';
import { geoPoint } from './components/map/types';
import Back from './components/buttons/Back';
import Forward from './components/buttons/Forward';
import Marker from './components/map/Marker';

setupIonicReact();

const initialScope: MapScope = {
  center: { lat: -37.8403508, lon: 77.5539501 },
  zoom: 13,
  tileProvider: 'osm',
};
const scopeAtom = atomWithHash('scope', initialScope);

export const setCenterAtom = atom(null, (get, set, center: geoPoint) => {
  const previousScope = get(scopeAtom);
  const newScope: MapScope = {
    ...previousScope,
    center: center,
  };
  set(scopeAtom, newScope);
});
/**
 *
 * @returns The root app component
 */
const App: React.FC = () => {
  const [scope, setScope] = useAtom(scopeAtom);

  console.log(`App, scope: ${JSON.stringify(scope)}`);
  const marker = (
    <Marker
      coordinates={{ lat: -37.8403508, lon: 77.5539501 }}
      icon={
        <circle
          cx={0}
          cy={0}
          r={6 / 256}
          fill='blue'
          opacity='90%'
          stroke='white'
          strokeWidth={3 / 256}
          strokeOpacity='100%'
        ></circle>
      }
      key='current'
    />
  );
  return (
    <IonApp>
      <IonContent fullscreen={true}>
        <IonApp>
          <LiveMap
            scope={scope}
            setScope={debounce(setScope, 1000)}
            numberOfTiledLayers={5}
            markers={[marker]}
          />
        </IonApp>
      </IonContent>
      <IonHeader className='ion-no-border' translucent={true}>
        <IonToolbar>
          <IonButtons slot='start'>
            <Back />
            <Forward />
          </IonButtons>
          <IonButtons slot='end'></IonButtons>
        </IonToolbar>
      </IonHeader>
      <IonFooter className='ion-no-border'>
        <IonToolbar>
          <IonButtons>
            <GetLocation />
          </IonButtons>
        </IonToolbar>
      </IonFooter>
    </IonApp>
  );
};

export default App;