import ActionsPanel from './ActionsPanel';

import {API_DOMAIN, API_REFRESH_INTERVAL} from '../constants';
import {
  fetcher,
  formatDateObjIndia,
  parseIndiaDate,
  retry,
} from '../utils/commonFunctions';

import {max} from 'date-fns';
import equal from 'fast-deep-equal';
import {memo, useEffect, useMemo, useState, lazy, Suspense} from 'react';
import {useLocalStorage} from 'react-use';
import useSWR from 'swr';

const Updates = lazy(() => retry(() => import('./Updates')));

const Actions = ({date, setDate, dates, lastUpdatedDate}) => {
  const [showUpdates, setShowUpdates] = useState(false);
  const [newUpdate, setNewUpdate] = useLocalStorage('newUpdate', false);
  const [lastViewedLog, setLastViewedLog] = useLocalStorage('lastViewedLog', 0);
  const [isTimelineMode, setIsTimelineMode] = useState(false);

  const {data: updates} = useSWR(`${API_DOMAIN}/updatelog/log.json`, fetcher, {
    refreshInterval: API_REFRESH_INTERVAL,
  });

  useEffect(() => {
    if (updates !== undefined) {
      const lastTimestamp = updates.slice().reverse()[0].timestamp * 1000;
      if (lastTimestamp !== lastViewedLog) {
        setNewUpdate(true);
        setLastViewedLog(lastTimestamp);
      }
    }
  }, [lastViewedLog, updates, setLastViewedLog, setNewUpdate]);

  const maxLastUpdatedDate = useMemo(() => {
    return formatDateObjIndia(
      max(
        [lastViewedLog, lastUpdatedDate]
          .filter((date) => date)
          .map((date) => parseIndiaDate(date))
      )
    );
  }, [lastViewedLog, lastUpdatedDate]);

  return (
    <>
      <ActionsPanel
        {...{
          lastUpdatedDate: maxLastUpdatedDate,
          newUpdate,
          isTimelineMode,
          setIsTimelineMode,
          showUpdates,
          date,
          setDate,
          dates,
          setNewUpdate,
          setShowUpdates,
        }}
      />

      {showUpdates && (
        <Suspense fallback={<div />}>
          <Updates {...{updates}} />
        </Suspense>
      )}
    </>
  );
};

const isEqual = (prevProps, currProps) => {
  if (!equal(currProps.date, prevProps.date)) {
    return false;
  } else if (!equal(currProps.lastUpdatedDate, prevProps.lastUpdatedDate)) {
    return false;
  } else if (!equal(currProps.dates, prevProps.dates)) {
    return false;
  }
  return true;
};

export default memo(Actions, isEqual);