// REQ0047/order-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,
  IonRefresher,
  IonRefresherContent,
  RefresherEventDetail,
} 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 { Order } from './types';
import { bookmarksOutline, chevronBackOutline, chevronDownCircleOutline, chevronForwardOutline, heart, logoIonic, menuOutline } from 'ionicons/icons';
import AboutPopover from '../../components/AboutPopover';
import { getOrders } from '../../api/getOrders';
import Loading from '../../components/Loading';
import paths from '../../paths';

interface OwnProps {}

interface StateProps {
  speakers: Speaker[];
  speakerSessions: { [key: string]: Session[] };
}

interface DispatchProps {}

interface SpeakerListProps extends OwnProps, StateProps, DispatchProps {}

const EventList: React.FC<SpeakerListProps> = ({ speakers, speakerSessions }) => {
  const router = useIonRouter();
  const [orders, setEvents] = useState<Order[]>([]);

  const [showPopover, setShowPopover] = useState(false);
  const [popoverEvent, setPopoverEvent] = useState<MouseEvent>();
  const modal = useRef<HTMLIonModalElement>(null);

  useEffect(() => {
    getOrders().then(({ data }) => {
      console.log({ data });
      setEvents(data);
    });
  }, []);

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

  function handleShowOrderDetail(order_id: string) {
    router.push(paths.getOrderDetail(order_id));
  }

  function handleNotImplemented() {
    router.push(paths.NOT_IMPLEMENTED);
  }

  function handleBookmarksClick() {
    router.push(paths.FAVOURITES_LIST);
  }

  if (!orders) return <Loading />;

  return (
    <IonPage id="speaker-list">
      <IonHeader translucent={true} className="ion-no-border">
        <IonToolbar>
          <IonButtons slot="end">
            {/* <IonMenuButton /> */}
            <IonButton shape="round" expand="block" onClick={handleBookmarksClick}>
              <IonIcon slot="icon-only" icon={bookmarksOutline}></IonIcon>
            </IonButton>
          </IonButtons>
          <IonTitle>My Orders</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 Orders</IonTitle>
          </IonToolbar>
        </IonHeader>

        <IonList>
          {orders.map((order, idx) => (
            <IonItem button onClick={handleNotImplemented}>
              <div
                style={{
                  paddingBottom: '1rem',
                  paddingTop: '1rem',
                }}
              >
                <div
                  style={{
                    display: 'flex',
                    gap: '1rem',
                  }}
                >
                  <div style={{ width: '70px' }}>
                    <IonAvatar>
                      <img alt="Silhouette of a person's head" src="https://plus.unsplash.com/premium_photo-1683121126477-17ef068309bc" />
                    </IonAvatar>
                  </div>

                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'column',
                      gap: '1rem',
                      flexGrow: 1,
                    }}
                  >
                    <div
                      style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                      }}
                    >
                      <div style={{ fontSize: '1.2rem' }}>{order.title}</div>
                      <IonButton shape="round" onClick={() => handleShowOrderDetail('1')} size="small" fill="clear">
                        <IonIcon slot="icon-only" icon={chevronForwardOutline} size="small"></IonIcon>
                      </IonButton>
                    </div>
                    <div
                      style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '0.33rem',
                        fontSize: '0.9rem',
                      }}
                    >
                      <div>Order time: {order.createdAt} </div>
                      <div>Last payment date: {order.last_payment_date}</div>
                      <div>Number of applicants: 38 </div>
                      <div>Remaining dates: 50 </div>
                      <div>
                        <IonButton fill="outline">{order.status}</IonButton>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </IonItem>
          ))}
        </IonList>
      </IonContent>

      {/* REQ0079/event-filter */}
      <IonModal ref={modal} trigger="open-modal" initialBreakpoint={0.5} breakpoints={[0, 0.25, 0.5, 0.75]}>
        <IonContent className="ion-padding">
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              gap: '1rem',
            }}
          >
            <div
              style={{
                textAlign: 'center',
                fontWeight: '1rem',
                fontSize: '1.5rem',
                marginTop: '0.5rem',
                marginBottom: '0.5rem',
              }}
            >
              Filter
            </div>
            <div
              style={{
                textAlign: 'center',
                fontWeight: '1rem',
                marginTop: '0.5rem',
                marginBottom: '0.5rem',
              }}
            >
              Maximum number of participant
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <IonButton shape="round">2-10</IonButton>
              <IonButton shape="round">12-40</IonButton>
              <IonButton shape="round">All</IonButton>
            </div>
            <div
              style={{
                textAlign: 'center',
                fontWeight: '1rem',
                marginTop: '0.5rem',
                marginBottom: '0.5rem',
              }}
            >
              Held date
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <IonButton shape="round">Weekly</IonButton>
              <IonButton shape="round">Monthly</IonButton>
              <IonButton shape="round">All</IonButton>
            </div>

            <IonButton shape="round" style={{ marginTop: '1rem', marginBottom: '1rem' }}>
              Apply
            </IonButton>
          </div>
        </IonContent>
      </IonModal>
    </IonPage>
  );
};

export default connect<OwnProps, StateProps, DispatchProps>({
  mapStateToProps: (state) => ({
    speakers: selectors.getSpeakers(state),
    speakerSessions: selectors.getSpeakerSessions(state),
  }),
  component: React.memo(EventList),
});