// REQ0054/user-setting
//
// PURPOSE:
// - Provides functionality view user profile
//
// RULES:
// - T.B.A.
//
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,
  IonNote,
  IonText,
} 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 {
  alertCircleOutline,
  alertOutline,
  apps,
  appsOutline,
  car,
  cart,
  chatbubbleOutline,
  chevronBackOutline,
  chevronForward,
  chevronForwardOutline,
  createOutline,
  documentTextOutline,
  gift,
  giftOutline,
  heart,
  languageOutline,
  listCircle,
  menuOutline,
  settingsOutline,
  shareSocialOutline,
  sunny,
  trashOutline,
} from 'ionicons/icons';
import AboutPopover from '../../components/AboutPopover';
import { OverlayEventDetail } from '@ionic/react/dist/types/components/react-component-lib/interfaces';
import paths from '../../paths';
import { logoutUser, setAccessToken, setIsLoggedIn } from '../../data/user/user.actions';

interface OwnProps {}

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

interface DispatchProps {
  logoutUser: typeof logoutUser;
  setAccessToken: typeof setAccessToken;
  setIsLoggedIn: typeof setIsLoggedIn;
}

interface SettingsProps extends OwnProps, StateProps, DispatchProps {}

const SettingsPage: React.FC<SettingsProps> = ({
  speakers,
  speakerSessions,
  logoutUser,
  setAccessToken,
  setIsLoggedIn,
}) => {
  const [events, setEvents] = useState<Event[] | []>([]);
  const [showPopover, setShowPopover] = useState(false);
  const [popoverEvent, setPopoverEvent] = useState<MouseEvent>();
  const modal = useRef<HTMLIonModalElement>(null);

  const router = useIonRouter();

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

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

  function handleLanguageClick() {
    router.push(paths.CHANGE_LANGUAGE);
  }

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

  function handleDemoPageClick() {
    router.push(paths.DEMO_PAGE);
  }

  function handleServiceAgreementClick() {
    router.push(paths.SERVICE_AGREEMENT);
  }

  function handlePrivacyAgreementClick() {
    router.push(paths.PRIVACY_AGREEMENT);
  }

  const [showLogoutConfirmModal, setShowLogoutConfirmModal] = useState<boolean>(false);
  function handleConfirmLogoutClick() {
    setShowLogoutConfirmModal(true);
  }

  function handleLogoutClick() {
    setAccessToken();
    setIsLoggedIn(false);

    router.push('/tabs', 'forward', 'replace');

    setShowLogoutConfirmModal(false);
  }
  function handleLogoutCancel() {
    setShowLogoutConfirmModal(false);
  }

  function handleDemoWeatherApp() {
    router.push(paths.DEMO_WEATHER_APP);
  }

  function handleDemoReactShopClick() {
    router.push(paths.DEMO_REACT_SHOP);
  }

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

          <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
            <IonIcon icon={settingsOutline} size="large"></IonIcon>
            <IonTitle>Setting</IonTitle>
          </div>
        </IonToolbar>
      </IonHeader>

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

        <IonList inset={false}>
          <IonItem button={true} onClick={() => handleDemoWeatherApp()}>
            <IonIcon slot="start" icon={sunny} size="large"></IonIcon>
            <IonLabel>Weather App</IonLabel>
            <IonIcon icon={chevronForwardOutline}></IonIcon>
          </IonItem>
        </IonList>

        <IonList inset={false}>
          <IonItem button={true} onClick={() => handleDemoReactShopClick()}>
            <IonIcon slot="start" icon={cart} size="large"></IonIcon>
            <IonLabel>Demo React Shop</IonLabel>
            <IonIcon icon={chevronForwardOutline}></IonIcon>
          </IonItem>
        </IonList>

        <IonList inset={false}>
          <IonItem
            button={true}
            onClick={() => {
              router.push(paths.DEMO_CLUB_HOUSE, 'forward');
            }}
          >
            <IonIcon slot="start" icon={cart} size="large"></IonIcon>
            <IonLabel>Demo Club house</IonLabel>
            <IonIcon icon={chevronForwardOutline}></IonIcon>
          </IonItem>
        </IonList>

        <IonList inset={false}>
          <IonItem
            button={true}
            onClick={() => {
              router.push(paths.DEMO_SCORE_BOARD, 'forward');
            }}
          >
            <IonIcon slot="start" icon={car} size="large"></IonIcon>
            <IonLabel>
              Demo Score Board <br />
              (IonCard problem)
            </IonLabel>
            <IonIcon icon={chevronForwardOutline}></IonIcon>
          </IonItem>
        </IonList>

        {/*  */}

        <IonList inset={false}>
          <IonItem button={true} onClick={() => router.push(paths.DEMO_QUOTE_APP, 'forward')}>
            <IonIcon slot="start" icon={car} size="large"></IonIcon>
            <IonLabel>Demo Quote App</IonLabel>
            <IonIcon icon={chevronForwardOutline}></IonIcon>
          </IonItem>
        </IonList>

        <IonList inset={false}>
          <IonItem button={true} onClick={() => router.push(paths.DEMO_QR_SCANNER, 'forward')}>
            <IonIcon slot="start" icon={car} size="large"></IonIcon>
            <IonLabel>Demo Qr scanner</IonLabel>
            <IonIcon icon={chevronForwardOutline}></IonIcon>
          </IonItem>
        </IonList>

        <IonList inset={false}>
          <IonItem button={true} onClick={() => router.push(paths.DEMO_SHOP_APP_UI, 'forward')}>
            <IonIcon slot="start" icon={cart} size="large"></IonIcon>
            <IonLabel>Demo Shop App UI</IonLabel>
            <IonIcon icon={chevronForwardOutline}></IonIcon>
          </IonItem>
        </IonList>

        <IonList inset={false}>
          <IonItem button={true} onClick={() => router.push(paths.DEMO_DICTIONARY_APP, 'forward')}>
            <IonIcon slot="start" icon={cart} size="large"></IonIcon>
            <IonLabel>Demo Dictionary App</IonLabel>
            <IonIcon icon={chevronForwardOutline}></IonIcon>
          </IonItem>
        </IonList>

        {/*  */}
        <IonList inset={false}>
          <IonItem button={true} onClick={() => router.push(paths.DEMO_RECIPE_APP, 'forward')}>
            <IonIcon slot="start" icon={cart} size="large"></IonIcon>
            <IonLabel>Demo Recipe App</IonLabel>
            <IonIcon icon={chevronForwardOutline}></IonIcon>
          </IonItem>
        </IonList>
      </IonContent>

      {/* REQ0058/logout */}
      <IonModal
        isOpen={showLogoutConfirmModal}
        initialBreakpoint={0.5}
        breakpoints={[0, 0.25, 0.5, 0.75]}
      >
        <IonContent
          className="ion-padding"
          style={{
            '--background': 'pink',
          }}
        >
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              gap: '1rem',
            }}
          >
            <div style={{ marginTop: '1rem', width: '50px', height: '50px' }}>
              <IonIcon icon={alertCircleOutline} />
            </div>
            <div
              style={{
                textAlign: 'center',
                fontWeight: '1rem',
                fontSize: '1.5rem',
                marginTop: '0.5rem',
                marginBottom: '0.5rem',
              }}
            >
              Logout
            </div>
            <div
              style={{
                textAlign: 'center',
                fontWeight: '1rem',
                marginTop: '0.5rem',
                marginBottom: '0.5rem',
              }}
            >
              Unable to receive notifications after logging out
            </div>

            <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
              <IonButton size="large" fill="outline" shape="round" onClick={handleLogoutCancel}>
                Cancel
              </IonButton>
              <IonButton size="large" shape="round" onClick={handleLogoutClick}>
                Logout
              </IonButton>
            </div>
          </div>
        </IonContent>
      </IonModal>
    </IonPage>
  );
};

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