// REQ0042/event-detail
//
// PURPOSE:
// - Provides functionality view event detail
//
// 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,
} 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';

interface OwnProps extends RouteComponentProps {
  event?: Event;
}

interface StateProps {}

interface DispatchProps {}

interface SpeakerDetailProps extends OwnProps, StateProps, DispatchProps {}

interface AboutProps {}

const EventDetail: React.FC<SpeakerDetailProps> = () => {
  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);
    });
  }, []);

  const router = useIonRouter();
  function handleBackOnClick() {
    router.goBack();
  }

  if (!eventDetail) return <>loading</>;

  return (
    <IonPage id="about-page">
      <IonContent>
        <IonHeader className="ion-no-border">
          <IonToolbar>
            <IonButtons slot="start">
              {/* <IonMenuButton></IonMenuButton> */}
              <IonButton shape="round" onClick={() => handleBackOnClick()}>
                <IonIcon slot="icon-only" icon={chevronBackOutline}></IonIcon>
              </IonButton>
            </IonButtons>
            <IonButtons slot="end">
              <IonButton onClick={presentPopover}>
                <IonIcon
                  slot="icon-only"
                  ios={ellipsisHorizontal}
                  md={ellipsisVertical}
                ></IonIcon>
              </IonButton>
            </IonButtons>
          </IonToolbar>
        </IonHeader>

        <div className="about-header">
          <div className="about-image madison" style={{ opacity: 1 }}></div>
        </div>

        <div>{eventDetail.avatar}</div>

        <div>
          <div>{format(new Date(eventDetail.eventDate), 'yyyy-MM-dd')}</div>
          <h1>{eventDetail.title}</h1>

          <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
            <div>members place holder</div>
            <IonButton shape="round">More</IonButton>
          </div>
          <div
            style={{
              marginBottom: '1rem',
              paddingTop: '1rem',
              borderBottom: '1px solid black',
            }}
          ></div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
          <div style={{ display: 'flex', gap: '1rem' }}>
            <div>{eventDetail.currency}</div>
            <div>{eventDetail.price}</div>
            per person
          </div>

          <div>{eventDetail.duration_m}</div>

          <div style={{ display: 'flex', gap: '1rem' }}>
            <div>{eventDetail.ageBottom}</div>
            <div>{eventDetail.ageTop}</div>
            <div>years old</div>
          </div>

          <div>{eventDetail.location}</div>
          <div style={{ display: 'flex', gap: '1rem' }}>
            <IonIcon icon={logoIonic}></IonIcon>
            <div>40</div>

            <IonIcon icon={logoIonic}></IonIcon>
            <div>20</div>

            <IonIcon icon={logoIonic}></IonIcon>
            <div>20</div>
          </div>
        </div>
      </IonContent>

      <IonFooter>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            margin: '1rem',
          }}
        >
          <IonButton expand="full" shape="round">
            Join
          </IonButton>
        </div>
      </IonFooter>

      <IonPopover
        isOpen={showPopover}
        event={popoverEvent}
        onDidDismiss={() => setShowPopover(false)}
      >
        <AboutPopover dismiss={() => setShowPopover(false)} />
      </IonPopover>
    </IonPage>
  );
};

export default connect({
  mapStateToProps: (state, ownProps) => ({
    event: selectors.getEvent(state, ownProps),
  }),
  component: EventDetail,
});