// REQ0041/home_discover_event_tab

import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonButtons,
  IonButton,
  IonIcon,
  IonTitle,
  IonContent,
  useIonRouter,
  IonToast,
} from '@ionic/react';
import { chevronBackOutline, menuOutline } from 'ionicons/icons';
import React, { useEffect, useRef, useState } from 'react';
import './style.scss';
import PATHS from '../../PATHS';
import axios from 'axios';
import { UserState } from '../../data/user/user.state';
import { connect } from '../../data/connect';

import * as selectors from '../../data/selectors';
import constants from '../../constants';

interface OwnProps {}

interface StateProps {
  isLoggedin: boolean;
  //
  partyUserState: UserState;
  //
  joinEventId: string;
}

interface DispatchProps {}

interface PageProps extends OwnProps, StateProps, DispatchProps {}

const DummyPayPage: React.FC<PageProps> = ({
  isLoggedin,
  partyUserState,
  //
  joinEventId,
}) => {
  const router = useIonRouter();

  // if (!isLoggedin) return <NotLoggedIn />;

  async function handlePayClick() {
    try {
      await axios.post(constants.PARTY_USER_JOIN_EVENT, {
        data: {
          eventItemId: joinEventId,
          email: partyUserState.meta?.email,
        },
      });

      router.goBack();

      setShowJoinOKToast(true);
    } catch (error) {
      console.error(error);
    }
  }

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

  const [showJoinOKToast, setShowJoinOKToast] = useState(false);

  return (
    <IonPage id="speaker-list">
      <IonHeader translucent={true} className="ion-no-border">
        <IonToolbar>
          <IonButtons slot="start">
            {/* <IonMenuButton /> */}
            <IonButton shape="round">
              <IonIcon slot="icon-only" icon={chevronBackOutline}></IonIcon>
            </IonButton>
          </IonButtons>
          <IonTitle>Dummy pay event page</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen={true}>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            gap: '1rem',
            textAlign: 'center',

            padding: '3rem',
          }}
        >
          <div>This is a dummy page to emulate payment gateway work</div>

          <div>
            <div>pay for event</div>
            <pre style={{ backgroundColor: 'RGB(0,0,0, 0.1)' }}>{JSON.stringify(joinEventId)}</pre>
          </div>

          <IonButton onClick={handlePayClick}>Pay</IonButton>
          <IonButton onClick={handleCancelClick}>Cancel</IonButton>
        </div>

        <IonToast
          isOpen={showJoinOKToast}
          message="ok, event paid, thank you..."
          duration={2000}
          // onDidDismiss={() => setShowJoinOKToast(false)}
        />
      </IonContent>
    </IonPage>
  );
};

export default connect<OwnProps, StateProps, DispatchProps>({
  mapStateToProps: (state) => ({
    isLoggedin: state.user.isLoggedin,
    //
    joinEventId: selectors.getEventIdToJoin(state),
    //
    partyUserState: selectors.getPartyUserState(state),
  }),
  component: DummyPayPage,
});