import { useAtomValue } from 'jotai';
import type { ReactNode } from 'react';
import { useEffect, useState } from 'react';

import { Loading } from '../../ui/loading';
import * as styles from './index.css';
import { globalLoadingEventsAtom } from './index.jotai';

export {
  type GlobalLoadingEvent,
  pushGlobalLoadingEventAtom,
  resolveGlobalLoadingEventAtom,
} from './index.jotai';

export function GlobalLoading(): ReactNode {
  const globalLoadingEvents = useAtomValue(globalLoadingEventsAtom);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (globalLoadingEvents.length) {
      setLoading(true);
    } else {
      setLoading(false);
    }
  }, [globalLoadingEvents]);

  if (!globalLoadingEvents.length) {
    return null;
  }
  return (
    <div className={styles.globalLoadingWrapperStyle} data-loading={loading}>
      <Loading size={20} />
    </div>
  );
}