"use client";

import * as React from "react";
import { useState } from "react";
import { setupListeners } from "@reduxjs/toolkit/query";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import {
  registerBrowserReduxStore,
  unregisterBrowserReduxStore,
} from "@/lib/browser-redux-store";
import { makeStore, makePersistor } from "@/store";

export function StoreProvider({ children }: { children: React.ReactNode }) {
  const [store] = useState(() => makeStore());
  const [persistor] = useState(() => makePersistor(store));

  React.useEffect(() => {
    registerBrowserReduxStore(store);
    return () => {
      unregisterBrowserReduxStore();
    };
  }, [store]);

  React.useEffect(() => {
    return setupListeners(store.dispatch);
  }, [store]);

  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {children}
      </PersistGate>
    </Provider>
  );
}