React

import React, { useState, useRef, useEffect } from 'react';
import { useStoreState, useStoreActions } from 'easy-peasy';
import { isEmpty, get } from 'lodash-es';
import { Toast } from 'widget';

import BottomNavBar from 'components/BottomNavBar/BottomNavBar';
import DashboardBanner from 'components/DashboardBanner/DashboardBanner';
import ShareLink from 'components/ShareLink/ShareLink';
import CardShimmer from 'components/CardShimmer/CardShimmer';
import RecommendedCards from 'components/RecommendedCards/RecommendedCards';
import JoinClassScreen from 'containers/JoinClassScreen/JoinClassScreen';
import UpcomingClassCard from 'containers/UpcomingClassCard/UpcomingClassCard';

import { sendEvent } from 'utils/analyticsUtils';
import {
  getTimeStamp, getUTCTimeStamp, addDateTime, getCurrentServerTime, getLocalMidNight
} from 'utils/dateUtils';
import { getIfStudentAttendedClass, setIfStudentAttendedClass } from 'helpers/localStorage';

import { normalizeGetClassStructure } from 'helpers/app';

import commonStyles from 'scss/Common.module.scss';
import styles from './Dashboard.module.scss';

const minuteSeconds = 60;
const hourSeconds = minuteSeconds * 60;

const Dashboard = props => {
  const apiTimer = useRef(null);
  const serverTimer = useRef(null);
  const [statusScreen, setStatusScreen] = useState(false);
  const [loading, setLoading] = useState(true);
  const navValue = useStoreState(state => state.navigation);
  const { setNavValue } = useStoreActions(actions => actions.navigation);

  const {
    id: userId, isBookingPossible
  } = useStoreState(state => state.profile);

  const {
    bookingStatus,
    upcomingClass,
    alreadyBookedFlag,
    classTimeBreaks,
    errorStatus
  } = useStoreState(state => state.booking);

  const {
    gradeId,
  } = useStoreState(state => state.profile);

  const {
    serverTime,
    clientTime
  } = useStoreState(state => state.app);

  const localServerTime = useRef(getCurrentServerTime(serverTime, clientTime).valueOf());

  const studentAttendedClass = getIfStudentAttendedClass();

  const {
    getUpcomingClass,
    getVcId,
    resetBooking,
    updateUserUpcomingClassDetails,
  } = useStoreActions(actions => actions.booking);

  const {
    updateUserClassesInClientStore,
  } = useStoreActions(actions => actions.classes);

  const {
    startTime,
    endTime,
    virtualClassId,
    timeLeft
  } = upcomingClass || {};

  useEffect(() => {
    const eventObj = {
      event: 'pageview',
      screenName: 'dashboard_screen',
      eventDetails: {
        event: 'dashboard_screen',
      },
    };

    sendEvent(eventObj);
  }, []);

  const getUpcomingDemoClass = () => {
    getUpcomingClass()
      .then(response => {
        const upcomingClasses = get(response, 'data.upcoming_class', []);
        if (upcomingClasses.length) {
          // eslint-disable-next-line array-callback-return
          const data = upcomingClasses.find((cur, index, arr) => {
            if (arr.length === 1) {
              return cur;
            }
            const endTimeStamp = getUTCTimeStamp(cur.end_time);
            const clientTimeStamp = getTimeStamp();
            if (clientTimeStamp < endTimeStamp) {
              return cur;
            }
          });
          if (data.vc_id) {
            clearInterval(apiTimer.current);
          }
          const upcomingClassInfo = normalizeGetClassStructure(data);
          const classInfo = {
            unit: {
              slug: upcomingClassInfo.slug,
              title: upcomingClassInfo.title,
              description: upcomingClassInfo.description,
            },
            course: {
              name: upcomingClassInfo.subjectName
            },
            teacherName: upcomingClassInfo.teacherName,
            startTime: upcomingClassInfo.startTime,
            endTime: upcomingClassInfo.endTime,
            virtualClassId: upcomingClassInfo.virtualClassId
          };
          updateUserUpcomingClassDetails({
            upcomingClass: upcomingClassInfo,
            classTimeBreaks: '',
          });
          updateUserClassesInClientStore(classInfo);
        } else {
          updateUserUpcomingClassDetails({
            upcomingClass: {},
            classTimeBreaks: '',
          });
        }
        setLoading(false);
      }).catch(() => {
        setLoading(false);
        // TODO: if response is not present 401 / 403
      });
  };

  const getUpcomingClassDetails = () => {
    if (!userId || !gradeId) {
      resetBooking();
      setIfStudentAttendedClass(false);
      props.history.replace('/booking');
    } else {
      getUpcomingDemoClass();
    }
  };

  const updateServerTime = () => {
    serverTimer.current = setInterval(() => {
      localServerTime.current = addDateTime(localServerTime.current, 30, 'seconds');
      updateUserUpcomingClassDetails({ serverTime: localServerTime.current });
    }, 30000);
  };

  const apiCallForDemoClass = () => {
    apiTimer.current = setInterval(() => {
      if (!isEmpty(bookingStatus)) {
        getVcId({ scheduled_session_id: bookingStatus.scheduled_session_id })
          .then(response => {
            if (response.data) {
              const { id: vcId } = response.data.get_vc_id || {};
              if (vcId) {
                clearInterval(apiTimer.current);
              }
              const upcomingClassObj = {
                ...upcomingClass,
                virtualClassId: vcId
              };
              updateUserUpcomingClassDetails({ upcomingClass: upcomingClassObj });
            }
          });
      }
    }, 300000);
  };

  useEffect(() => {
    getUpcomingClassDetails();
    updateServerTime();

    return () => {
      if (serverTimer.current) {
        clearInterval(serverTimer.current);
      }
      if (apiTimer.current) {
        clearInterval(apiTimer.current);
      }
    };
  }, []);

  useEffect(() => {
    /* upcoming class details being fetch */
    if (isEmpty(upcomingClass) || loading) {
      return;
    }
    const serverTimeStamp = localServerTime.current;
    const startTimeStamp = getUTCTimeStamp(startTime);
    const endTimeStamp = getUTCTimeStamp(endTime);

    const beforeFiveMins = (startTimeStamp - (minuteSeconds * 5 * 1000));
    const afterTenMins = (startTimeStamp + (minuteSeconds * 10 * 1000));

    const midNightStamp = getLocalMidNight(startTime);
    if (serverTimeStamp > midNightStamp) {
      updateUserUpcomingClassDetails({
        classTimeBreaks: 'midNight'
      });
      clearInterval(serverTimer.current);
      return;
    }

    if (serverTimeStamp > endTimeStamp) {
      clearInterval(apiTimer.current);
      updateUserUpcomingClassDetails({
        classTimeBreaks: 'classEnded'
      });
      return;
    }

    if (serverTimeStamp > afterTenMins) {
      updateUserUpcomingClassDetails({
        classTimeBreaks: 'post10mins'
      });
      return;
    }

    if (serverTimeStamp >= beforeFiveMins && serverTimeStamp <= afterTenMins) {
      updateUserUpcomingClassDetails({
        classTimeBreaks: ''
      });
      setStatusScreen(true);
    } else {
      updateUserUpcomingClassDetails({
        classTimeBreaks: ''
      });
      setStatusScreen(false);
    }

    /* current time is 1 hour before the class start time
      make an API call to get virtual_class_id in 5 mins interval
    */
    if (serverTimeStamp >= (startTimeStamp - (hourSeconds * 1000))) {
      if (!apiTimer.current) {
        apiCallForDemoClass();
      }
    }
  }, [localServerTime.current]);

  const _onClick = () => {
    setStatusScreen(false);
  };

  useEffect(() => {
    setNavValue('home');
  }, []);

  /* navbar function */
  const handleChange = newValue => {
    props.history.push(`/${newValue === 'home' ? 'dashboard' : 'library'}`);
    setNavValue(newValue);
  };

  const _onHide = () => {
    updateUserUpcomingClassDetails({ alreadyBookedFlag: false });
  };

  const getCardHeading = () => {
    if (studentAttendedClass) {
      return 'Explore other Lido subjects';
    } if (!isEmpty(upcomingClass) && classTimeBreaks === 'classEnded') {
      return 'Missed the class?';
    }
    return 'Try your first Lido class for free';
  };

  const getCardSubHeading = () => {
    if (studentAttendedClass) {
      return null;
    }
    if (!isEmpty(upcomingClass) && classTimeBreaks === 'classEnded') {
      return <div className={styles.subHeading}>Missed the class?</div>;
    }
    return <div className={styles.subHeading}>Book a trial class in any of our awesome subjects</div>;
  };

  const getUpcomingClassCard = () => {
    if (loading) {
      return (
        <CardShimmer
          bookingDate
          slotTime
          buttonText
          className={styles.cardShimmer}
        />
      );
    }
    const recommendedCardsMarkup = (
      <div className={styles.innerWrapper}>
        <div className={`${commonStyles.heading} ${styles.heading}`}>
          {getCardHeading()}
        </div>
        {getCardSubHeading()}
        <RecommendedCards history={props.history} />
      </div>
    );

    let actualContent;

    if(alreadyBookedFlag && (errorStatus === 409 || errorStatus === 429)){
      if(!isBookingPossible){
        actualContent =  (
          <>
            <Toast
              heading="Thank you for registering!"
              subHeading={(
                <>
                  <p>Currently we require a laptop/desktop to take a free trial class with Lido.</p>
                  <p>We will be supporting class via mobile very soon and will reach out to you when this is live!</p>
                  <p>In the meanwhile, explore our content library filled with games, videos and quizzes</p>
                  <p><small>Thanks again for showing interest!</small></p>
                </>
              )}
            />
            {getUpcomingClassCard()}
          </>
        );
      }
      else if(errorStatus===409){
        actualContent = (
          (
            <>
              <Toast
                onHide={_onHide}
                heading="Hello again!"
                subHeading="You have already booked a class with this number. Please check the details below!"
              />
              {getUpcomingClassCard()}
            </>
        );
      }
      else{
        actualContent = (
          <>
            <Toast
              onHide={_onHide}
              heading="We cannot make the booking"
              subHeading="Oopse! You have gone over the limit of free classes you can take this month."
            />
            {getUpcomingClassCard()}
          </>
        );
      }
    }
    else{
      actualContent = (
        {getUpcomingClassCard()}
      );
    }



    if (!isEmpty(upcomingClass) && classTimeBreaks !== 'midNight') {
      if (!(classTimeBreaks === 'classEnded' && studentAttendedClass)) {
        return (
          <UpcomingClassCard
            virtualClassId={virtualClassId}
            timeLeft={timeLeft}
            history={props.history}
          />
        );
      }
      return recommendedCardsMarkup;
    }

    return recommendedCardsMarkup;
  };

  return (
    <div className={styles.root}>
      {statusScreen
        ? (
          <JoinClassScreen
            history={props.history}
            virtualClassId={virtualClassId}
            onClick={_onClick}
          />
        )
        : null}
      <div className={styles.body}>
        <DashboardBanner
          history={props.history}
          headerType={(studentAttendedClass && classTimeBreaks === 'classEnded') ? 'premiumHeader' : ''}
        />
        <actualContent />
        <ShareLink />
      </div>
      <BottomNavBar
        selectedTab={navValue.navValue}
        onChange={handleChange}
      />
    </div>
  );
};

export default Dashboard;