import { Suspense } from 'react'
import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'
import { getProductBySlugQueryOptions } from '../hooks/useProductData'
import { Metadata, NextPage } from 'next'
import DetailService from '../DetailService'
import Loading from './loading'
import { ServiceDetailResponse } from '../types/ProductTypes'

interface PageProps {
    params: Promise<{
        id: string
    }>
}


export async function generateMetadata(
    { params }: PageProps
): Promise<Metadata> {
    const { id } = await params
    const queryClient = new QueryClient()

    await queryClient.prefetchQuery(getProductBySlugQueryOptions(id))
    const service = queryClient.getQueryData(getProductBySlugQueryOptions(id).queryKey) as ServiceDetailResponse

    return {
        title: service.data.danakService.pageTitle || 'محصولات داناک' + ' | ' + service.data.danakService.name,
        description: (service.data.danakService.metaDescription || '').replace(/<[^>]*>/g, ''),
    }
}

const SingleService: NextPage<PageProps> = async ({ params }) => {

    const { id } = await params

    return (
        <Suspense fallback={<Loading />}>
            <SingleServicePage id={id} />
        </Suspense>
    )
}

async function SingleServicePage({ id }: { id: string }) {
    const queryClient = new QueryClient()

    await Promise.all([
        queryClient.prefetchQuery(getProductBySlugQueryOptions(id)),
    ])

    return (
        <HydrationBoundary state={dehydrate(queryClient)}>
            <DetailService id={id} />
        </HydrationBoundary>
    )
}

export default SingleService