"use client";
import Button from "@/Components/Buttons/Button"
import Loader from "@/Components/Loaders/Loader"
import ViewWithLoader from "@/Components/Loaders/ViewWithLoader"
import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query"
import React, { type ReactElement, useState } from "react"

const ViewWithLoaderExample = (): ReactElement => {

    const [ct, setCt] = useState(0)

    const { data, isLoading, error, isFetching } = useQuery<number[]>({
        queryKey: ['test', ct],
        queryFn: async () => {
            await new Promise((resolve) => setTimeout(resolve, 1000))
            return Array.from({ length: 50 }, (_, i) => i + 1 + (ct * 10))

        },
        placeholderData: (previousData) => {
            return previousData ?? undefined
        }
    })


    return (
        <div className='p-20'>
            <Button onClick={() => setCt(ct + 1)}>Load something different ({ct})</Button>
            <div className='relative'>
                <ViewWithLoader
                    data={data}
                    isLoading={isLoading}
                    isFetching={isFetching}
                    error={error}
                    keepExistingContentWhileLoading={true}
                >
                    <div className="p-10">
                        <ul>
                            {data?.map((num) => (
                                <li key={num} className="border-b border-gray-300 py-2">{num}</li>
                            ))}
                        </ul>
                    </div>
                </ViewWithLoader>
            </div>
        </div>
    )


}

const ViewWithLoaderExampleWrap = (): ReactElement => {
    return (
        <QueryClientProvider client={new QueryClient()}>
            <ViewWithLoaderExample />
        </QueryClientProvider>
    )
}

export default ViewWithLoaderExampleWrap