// REQ0042/event-detail
//
// PURPOSE:
// - show avatar in a row
//
// RULES:
// - T.B.A.
//
import React, { useEffect, useState } from 'react';
import {
  IonHeader,
  IonToolbar,
  IonContent,
  IonPage,
  IonButtons,
  IonMenuButton,
  IonButton,
  IonIcon,
  IonDatetime,
  IonSelectOption,
  IonList,
  IonItem,
  IonLabel,
  IonSelect,
  IonPopover,
  IonText,
  IonFooter,
  useIonRouter,
  IonAvatar,
  IonThumbnail,
} from '@ionic/react';
import './style.scss';
import {
  chevronBackOutline,
  ellipsisHorizontal,
  ellipsisVertical,
  heart,
  logoIonic,
} from 'ionicons/icons';
import AboutPopover from '../../components/AboutPopover';
import { format, parseISO } from 'date-fns';
import { TestContent } from './TestContent';
import { Helloworld } from '../../api/Helloworld';
import { getEventById } from '../../api/getEventById';
import { connect } from '../../data/connect';
import * as selectors from '../../data/selectors';
import { Event } from '../../models/Event';
import { RouteComponentProps } from 'react-router';

const leftShift: number = 10;
const thumbnailSize: number = 40;

interface OwnProps extends RouteComponentProps {
  event_detail?: Event;
}

interface StateProps {}

interface DispatchProps {}

interface EventDetailProps {
  avatars: string[];
}

const AvatarRow: React.FC<{ avatars: string[] }> = ({ avatars }) => {
  const router = useIonRouter();

  const [showPopover, setShowPopover] = useState(false);
  const [popoverEvent, setPopoverEvent] = useState<MouseEvent>();
  const [location, setLocation] = useState<'madison' | 'austin' | 'chicago' | 'seattle'>('madison');
  const [conferenceDate, setConferenceDate] = useState('2047-05-17T00:00:00-05:00');

  const selectOptions = {
    header: 'Select a Location',
  };

  const presentPopover = (e: React.MouseEvent) => {
    setPopoverEvent(e.nativeEvent);
    setShowPopover(true);
  };

  function displayDate(date: string, dateFormat: string) {
    return format(parseISO(date), dateFormat);
  }

  const [eventDetail, setEventDetail] = useState<Event | null>(null);
  useEffect(() => {
    Helloworld();
    getEventById('1').then(({ data }) => {
      console.log({ data });
      setEventDetail(data);
    });
  }, []);

  function handleBackOnClick() {
    router.goBack();
  }

  return (
    <>
      <div style={{ display: 'inline-flex', alignItems: 'center' }}>
        {avatars.slice(0, 3).map((m_avatar, idx) => (
          <div
            style={
              idx == 0
                ? {}
                : {
                    position: 'relative',
                    width: `calc( ${thumbnailSize}px - ${leftShift}px )`,
                    left: `-${leftShift}px`,
                  }
            }
          >
            <IonThumbnail
              style={{
                '--size': `${thumbnailSize}px`,
                '--border-radius': `${thumbnailSize / 2}px`,
                border: '3px solid white',
              }}
            >
              <img alt="Silhouette of a person's head" src={m_avatar} />
            </IonThumbnail>
          </div>
        ))}
        <div style={{ marginLeft: '0.1rem', fontWeight: 'bold' }}>
          {' '}
          +{avatars.length - 3} going{' '}
        </div>
      </div>
    </>
  );
};

export default AvatarRow;