import React from 'react';
import { useFindFlatDistributionCentresQuery } from '../dataFacade';
import { IonLoading, IonPage, IonContent, IonFooter, IonIcon, IonFab, IonFabButton, IonCard } from '@ionic/react';
import { Header, Empty } from '../components';
import { RouteComponentProps, useHistory } from 'react-router';
import { Marker } from 'google-maps-react';
import { Map } from '../components/Map';
import { add } from 'ionicons/icons';

export const DistributionCentrePage: React.FC<RouteComponentProps> = ({ match }) => {
  const history = useHistory();
  let { data, loading, error } = useFindFlatDistributionCentresQuery();

  if (error) {
    console.log(error);
  }

  if (loading) return <IonLoading
    isOpen={loading}
    message={'Loading...'}
  />;

  const distributionCentres = data?.findDistributionCentres?.items || [];

  let mapContent = <Empty />;
  const size = distributionCentres.length;

  if (size > 0) {
    const totalLatLong = {
      lat: 0, lng: 0
    };

    const distributionMarkers = distributionCentres
      .map((distributionCentre, index) => {
        const lat = distributionCentre?.lat!;
        const lng = distributionCentre?.long!;

        totalLatLong.lat += lat;
        totalLatLong.lng += lng;

        const title = `${distributionCentre?.address1} ${distributionCentre?.address2} ${distributionCentre?.city}`;

        return <Marker
          key={index}
          title={title}
          label={distributionCentre?.name!}
          onClick={() => history.push(`/manageDistributionCentre/${distributionCentre?._id}`)}
          position={{
            lat,
            lng
          }} />
      });

    mapContent = <Map
      zoom={12}
      center={{
        lat: totalLatLong.lat / size,
        lng: totalLatLong.lng / size
      }}>
      {distributionMarkers}
    </Map>
  }

  return (
    <IonPage>
      <Header title="Distribution Centers Map" match={match} />
      <IonContent className="ion-padding" >
        <IonCard>
          {mapContent}
        </IonCard>
        <IonFab vertical="bottom" horizontal="end" slot="fixed">
          <IonFabButton routerLink="createDistributionCentre">
            <IonIcon icon={add} />
          </IonFabButton>
        </IonFab>
      </IonContent>
      <IonFooter>
        <div>
          OpenVolunteer Platform
        </div>
      </IonFooter>
    </IonPage >
  );
};