import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

//쿼리 클라이언트 객체 생성
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // retry: 5, //기본값은 3
      // staleTime : 1 * 1000 * 60 * 60 * 24 * 7;
      // cacheTime:
    },
  },
}); //모든 쿼리에 사용되는 기본 옵션

{
  /* 쿼리 클라이언트를 앱에 공급 */
}
<QueryClientProvider client={queryClient}>
  <div className="App">
    <Suspense fallback={<Spinner size={200} messeage="페이지 로딩 중..." />}>
      <RouterProvider router={router} />
    </Suspense>
  </div>
  {/* tanstack 쿼리 개발 도구 */}
  <ReactQueryDevtools />
</QueryClientProvider>;

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // 요청 재시도 횟수
      retry: 3,
      // 캐시 시간 (기본 값: 5분)
      cacheTime: 5 * 60 * 1000,
      // 오래된 데이터(stale data) 식별 시간 (기본 값: 0)
      // staleTime이 0인 경우, "데이터를 가져오는 순간 오래된 데이터로 간주"
      staleTime: 3 * 1000,
      // 브라우저 윈도우 초점 이동될 경우, 다시 가져오기
      refetchOnWindowFocus: false,
      // 네트워크 다시 연결될 경우, 다시 가져오기
      refetchOnReconnect: false,
      // 다시 마운트될 경우, 다시 가져오기
      refetchOnMount: false,
    },
  },
});

async function fetchProducts() {
  const response = await fetch(
    `http://127.0.0.1:3000/api/collections/products/records`
  );
  return await response.json();
}

function TanStackQueryLibrary() {
  const {isLoading, data, isError, error} = useQuery(
    ['products'], //React Query 내부적으로 사용되는 고유한 값
    fetchProducts,
    {
      retry: 2,
    })

  if (isLoading) {
    return (
      <div className="grid place-content-center h-full">
        <Spinner size={160} />
      </div>
    );
  }

  if (isError) {
    return <div role="alert">{error.toString()}</div>;
  }

  return (
    {
      data?.items?.map((item) => {
        return (
          <li key={item.id}>
            {item.title}
            <img
            src={
            !item.photo
              ? 'https://placehold.co/191x291?text=PHOTO'
              : `http://127.0.0.1:3000/api/files/${item.collectionId}/${item.id}/${item.photo}`
            }
            />
          <span>{(item.price)}</span>
        </li>
      );
    })}
  )
}