import React, {
  Suspense,
  lazy,
  useCallback,
  useEffect,
  useMemo,
  useState,
} from "react";
import { useSelector } from "react-redux";
import usersService from "../../services/UsersService";
import Layout from "../Partials/Layout";
import LoadingSpinner from "../Spinners/LoadingSpinner";
const WalletBox = lazy(() => import("./WalletBox"));

const WalletRoutes = () => {
  const apiCall = new usersService();
  const { walletTable } = useSelector((state) => state.tableReload);
  const [walletList, setWalletList] = useState({
    loading: true,
    data: [],
    reload: false,
  });
  const [paymentHistory, setPaymentHistory] = useState({
    loading: true,
    data: [],
  });

  const getWalletList = () => {
    apiCall
      .getUserWallets()
      .then((res) => {
        if (res.data.internal_return < 0) {
          setWalletList({ loading: false, data: [] });
        } else {
          setWalletList({ loading: false, data: res.data?.result_list });
        }
      })
      .catch(() => {
        setWalletList({ loading: false, data: [] });
      });
  }

  const getPaymentHistory = () => {
    apiCall
      .getPaymentHx()
      .then((res) => {
        if (res.data.internal_return < 0) {
          setPaymentHistory({ loading: false, data: [] });
        } else {
          setPaymentHistory({ loading: false, data: res.data?.result_list });
        }
      })
      .catch(() => {
        setPaymentHistory({ loading: false, data: [] });
      });
  }

  useEffect(() => {
    // const fetchData = async () => {
    //   await Promise.all([getWalletList(), getPaymentHistory()]);
    // };

    // if (walletList.loading) {
    //   fetchData();
    // }
    getWalletList()
    getPaymentHistory()
  }, [walletTable]);



  console.log('TESTING',walletTable);
  return (
    <Layout>
      <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
        <WalletBox wallet={walletList} payment={paymentHistory} />
      </Suspense>
    </Layout>
  );
};

export default WalletRoutes;