import React, { useEffect } from 'react';

let resetClientSession: () => void;

const SessionCtx = React.createContext(null);

type propsType = {
  children: JSX.Element;
};

const ClientSessionProvide = (props: propsType) => {
  const { children } = props;
  let id;

  const ctx = { isFullLogin: false }; // I am not sure if this should be a useState

  useEffect(() => {
    resetClientSession = () => {
      if (id) {
        clearInterval(id);
      }
      ctx.isFullLogin = true;
      id = setInterval(() => {
        ctx.isFullLogin = false;
      }, 1000);
    };
  }, []);

  return (
    <SessionCtx.Provider value={ctx}>
      <Foo>{children}</Foo>
    </SessionCtx.Provider>
  );
};

export {
  SessionCtx,
  ClientSessionProvide,
  resetClientSession, // <--- This is a live export see
  //                          https://stackoverflow.com/questions/32558514/javascript-es6-export-const-vs-export-let
  //                          it is assign the value after ClientSessionProvide has mounted.
};

function Foo(props: propsType) {
  const { children } = props;
  const { isFullLogin } = React.useContext(SessionCtx);
  return (
    <>
      <div>{isFullLogin}</div>
      {children}
    </>
  );
}