HKSingleParty/03_source/mobile/src/pages/ChangeLanguage/index.tsx

// REQ0041/home_discover_event_tab

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,
  IonToast,
  useIonToast,
} 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 {
  checkmarkOutline,
  chevronBackOutline,
  chevronDownCircleOutline,
  closeOutline,
  heart,
  languageOutline,
  menuOutline,
} from 'ionicons/icons';
import AboutPopover from '../../components/AboutPopover';
import Loading from '../../components/Loading';

interface OwnProps {}

interface StateProps {
  events: Event[];
}

interface DispatchProps {}

interface SpeakerListProps extends OwnProps, StateProps, DispatchProps {}

const EventList: React.FC<SpeakerListProps> = ({ events }) => {
  const modal = useRef<HTMLIonModalElement>(null);

  const router = useIonRouter();

  function handleShowPartyEventDetail(event_id: string) {
    router.push(`/event_detail/${event_id}`);
  }

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

  const [confirmChangeLanguage, setConfirmChangeLanguage] =
    useState<boolean>(false);

  function handleChangeToChinese() {
    setConfirmChangeLanguage(true);
  }

  function handleChangeToEnglish() {
    setConfirmChangeLanguage(true);
  }

  function handleChangeToJapanese() {
    setConfirmChangeLanguage(true);
  }

  function handleApplyChangeLanguage() {
    setConfirmChangeLanguage(false);
  }

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

  function handleCancelChangeLanguage() {
    setConfirmChangeLanguage(false);
  }

  const [present] = useIonToast();

  const presentToast = () => {
    present({
      message: 'sorry but the function not yet implemented!',
      duration: 1500,
      position: 'bottom',
    });

    setConfirmChangeLanguage(false);
  };

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

  return (
    <IonPage id="speaker-list">
      <IonHeader translucent={true} className="ion-no-border">
        <IonToolbar>
          <IonButtons slot="start" onClick={handleBackClick}>
            {/* <IonMenuButton /> */}
            <IonButton shape="round" id="open-modal" expand="block">
              <IonIcon slot="icon-only" icon={chevronBackOutline}></IonIcon>
            </IonButton>
          </IonButtons>
          <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
            <IonIcon icon={languageOutline} size="large"></IonIcon>
            <IonTitle>Change Language</IonTitle>
          </div>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen={true}>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Change Language</IonTitle>
          </IonToolbar>
        </IonHeader>

        <IonList>
          <IonItem button={true} onClick={handleChangeToChinese}>
            <IonLabel>Chinese</IonLabel>
          </IonItem>
          <IonItem button={true} onClick={handleChangeToEnglish}>
            <IonLabel>English</IonLabel>
          </IonItem>
          <IonItem button={true} onClick={handleChangeToJapanese}>
            <IonLabel>Japanese</IonLabel>
          </IonItem>
        </IonList>
      </IonContent>

      {/* REQ0079/event-filter */}
      <IonModal
        ref={modal}
        isOpen={confirmChangeLanguage}
        initialBreakpoint={0.33}
        breakpoints={[0, 0.33, 0.66]}
        onDidDismiss={() => setConfirmChangeLanguage(false)}
      >
        <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',
              }}
            >
              Confirm change language
            </div>
            <div
              style={{
                textAlign: 'center',
                fontWeight: '1rem',
                marginTop: '0.5rem',
                marginBottom: '0.5rem',
              }}
            >
              Change language to Chinese
            </div>
            <div
              style={{
                marginLeft: '1rem',
                marginRight: '1rem',
                display: 'flex',
                justifyContent: 'space-between',
              }}
            >
              <IonButton
                fill="outline"
                size="large"
                shape="round"
                onClick={handleCancelChangeLanguage}
              >
                <IonIcon slot="start" icon={closeOutline}></IonIcon>
                No
              </IonButton>
              <IonButton size="large" shape="round" onClick={presentToast}>
                <IonIcon slot="start" icon={checkmarkOutline}></IonIcon>
                Yes
              </IonButton>
            </div>
          </div>
        </IonContent>
      </IonModal>
    </IonPage>
  );
};

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