import {ProductResource} from '@prisma/client'
import {getProductByIdWitData} from '@prisma/client/sql'
import {getTranslations} from 'next-intl/server'
import {notFound} from 'next/navigation'

import ProductCarousel from '@/components/pages/product/carousel'
import AddCartButton from '@/components/shared/store/add-cart-button'
import {
	Breadcrumb,
	BreadcrumbItem,
	BreadcrumbLink,
	BreadcrumbList,
	BreadcrumbPage,
	BreadcrumbSeparator
} from '@/components/ui/breadcrumb'
import {getProductResources} from '@/lib/data/models/product'
import {CategoryPageSqlSchema} from '@/lib/data/models/sqlSchemas'
import {db} from '@/lib/db/prisma/client'
import {thisLocale, toPrice} from '@/lib/utils'
import {Separator} from '@/ui/separator'
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/ui/tabs'

export default async function ProductPageIndex({id}: {id: string}) {
	const t = await getTranslations('Common')

	const data: CategoryPageSqlSchema[] = await db.$queryRawTyped(
		getProductByIdWitData(id)
	)

	const locale = await thisLocale(data)
	if (!locale) notFound()

	const resources: ProductResource[] | null = await getProductResources(
		parseInt(id)
	)

	//const files = await getMetaOfFile(locale.productId)

	return (
		<div className='mt-1'>
			<div className='container flex flex-col gap-8 sm:flex-row'>
				{/*<pre>{dump(resources)}</pre>*/}
				<div className='bw-product-col-left pt-3'>
					<Breadcrumb className='mb-4'>
						<BreadcrumbList>
							<BreadcrumbItem>
								<BreadcrumbLink href={'/'}>{t('home')}</BreadcrumbLink>
							</BreadcrumbItem>
							<BreadcrumbSeparator />
							<BreadcrumbItem>
								<BreadcrumbLink href={`/category/${locale.categorySlug}`}>
									{locale.categoryTitle}
								</BreadcrumbLink>
							</BreadcrumbItem>
							<BreadcrumbSeparator />
							<BreadcrumbItem>
								<BreadcrumbPage>{locale.title}</BreadcrumbPage>
							</BreadcrumbItem>
						</BreadcrumbList>
					</Breadcrumb>
					<div className='flex w-[82%] items-center justify-between'>
						<h1 className='my-4 text-3xl font-bold text-brand-violet-950'>
							{locale.title}
						</h1>
						<AddCartButton
							product={{
								id: locale.productId,
								quantity: 1,
								title: locale.title,
								price: toPrice(locale.price),
								image: locale.image
							}}
						/>
					</div>
					<Separator className='my-4 w-[82%] border-b border-brand-violet' />
					<ProductCarousel images={resources} title={locale.title} />
					<Tabs defaultValue='article' className=''>
						<TabsList className='grid w-full grid-cols-2'>
							<TabsTrigger value='article'>Опис</TabsTrigger>
							<TabsTrigger value='instuction'>Інструкція</TabsTrigger>
						</TabsList>
						<TabsContent value='article'>
							<article
								className='bw-product__text'
								dangerouslySetInnerHTML={{__html: locale.content as string}}
							></article>
						</TabsContent>
						<TabsContent value='instuction'>
							<div
								className='bw-product__text'
								dangerouslySetInnerHTML={{__html: locale.instruction as string}}
							></div>
						</TabsContent>
					</Tabs>
				</div>
				<section className='bw-product-col-right bg-gray-50 pt-3'>
					<div className=''>
						{t('price')}:
						<span className='ml-2 flex-auto text-right text-xl font-bold text-brand-violet'>
							{toPrice(locale.price)}
						</span>
					</div>
				</section>
			</div>
		</div>
	)
}