// REQ0044/near_by_page

import React, { useEffect, useRef, useState } from 'react';
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonPage,
  IonButtons,
  IonMenuButton,
  IonGrid,
  IonRow,
  IonCol,
  useIonRouter,
  IonButton,
  IonIcon,
  IonPopover,
  IonAvatar,
  IonImg,
  IonItem,
  IonLabel,
  IonList,
  IonModal,
  IonSearchbar,
  useIonModal,
  IonInput,
  RefresherEventDetail,
  IonRefresher,
  IonRefresherContent,
} from '@ionic/react';
import SpeakerItem from '../../components/SpeakerItem';
import { Speaker } from '../../models/Speaker';
import { Session } from '../../models/Schedule';
import { connect } from '../../data/connect';
import * as selectors from '../../data/selectors';
import '../SpeakerList.scss';
import { getEvents } from '../../api/getEvents';
import { format } from 'date-fns';
import { Event } from './types';
import { chevronDownCircleOutline, heart, menuOutline } from 'ionicons/icons';
import AboutPopover from '../../components/AboutPopover';
import { SampleMember } from '../MemberProfile/SampleMember';
import { getMembers } from '../../api/getMembers';
import { Member } from '../MemberProfile/type';
import Loading from '../../components/Loading';

interface OwnProps {}

interface StateProps {
  nearbyMembers: Member[];
}

interface DispatchProps {}

interface SpeakerListProps extends OwnProps, StateProps, DispatchProps {}

function MemberCell({ member }: { member: Member }) {
  const router = useIonRouter();

  return (
    <>
      <div style={{ display: 'flex', margin: '1rem', gap: '1rem' }}>
        <IonAvatar>
          <img
            alt="Silhouette of a person's head"
            src="https://images.unsplash.com/photo-1589419621083-1ead66c96fa7"
          />
        </IonAvatar>

        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
          <div style={{ display: 'flex', gap: '0.5rem' }}>
            <div>{member.name}</div>
            <div>{member.age}</div>
            <div>{member.rank}</div>
            <div>{member.verified}</div>
          </div>
          <div style={{ display: 'flex' }}>
            <div>{member.hobbies[0]}, </div>
            <div>{member.hobbies[1]}, </div>
            <div>{member.hobbies[2]}</div>
          </div>
          <div>
            {SampleMember.distance}, {SampleMember.location_area}
          </div>
        </div>
      </div>
    </>
  );
}

const MembersNearByList: React.FC<SpeakerListProps> = ({ nearbyMembers }) => {
  const router = useIonRouter();

  function handleMemberCellClick(id: string) {
    router.push(`/profile/${id}`);
  }

  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
    setTimeout(() => {
      // Any calls to load data go here
      event.detail.complete();
    }, 2000);
  }

  if (!nearbyMembers || nearbyMembers.length == 0) return <Loading />;

  return (
    <IonPage id="speaker-list">
      <IonHeader translucent={true} className="ion-no-border">
        <IonToolbar>
          <IonButtons slot="end">
            {/* <IonMenuButton /> */}
            <IonButton shape="round" id="open-modal" expand="block">
              <IonIcon slot="icon-only" icon={menuOutline}></IonIcon>
            </IonButton>
          </IonButtons>
          <IonTitle>My Nearby</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen={true}>
        <IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
          <IonRefresherContent
            pullingIcon={chevronDownCircleOutline}
            pullingText="Pull to refresh"
            refreshingSpinner="circles"
            refreshingText="Refreshing..."
          ></IonRefresherContent>
        </IonRefresher>

        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">My Nearby</IonTitle>
          </IonToolbar>
        </IonHeader>

        <IonList>
          {nearbyMembers.map((member, idx) => (
            <IonItem key={idx} button onClick={() => handleMemberCellClick(member.id.toString())}>
              <MemberCell member={member}></MemberCell>
            </IonItem>
          ))}
        </IonList>
      </IonContent>
    </IonPage>
  );
};

export default connect<OwnProps, StateProps, DispatchProps>({
  mapStateToProps: (state) => ({
    nearbyMembers: selectors.getNearbyMembers(state),
  }),
  component: React.memo(MembersNearByList),
});