import {getLocale} from 'next-intl/server'
import {notFound} from 'next/navigation'
import {strict} from 'node:assert'

import AddCartButton from '@/components/pages/product/add-cart-button'
import {ProductProps, getProductById} from '@/lib/data/models/product'
import {dump} from '@/lib/utils'
import useCartStore from '@/store/cart-store'
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/ui/tabs'

export default async function ProductPageIndex({id}: {id: string}) {
	const product = await getProductById(parseInt(id))
	if (!product) notFound()
	const {locales, toStore} = product as ProductProps
	const lang = await getLocale()
	const locale = locales[lang === 'uk' ? 0 : 1]
	const store = JSON.parse(JSON.stringify(toStore[0]))

	return (
		<div className='mt-1'>
			<div className='container flex flex-col sm:flex-row'>
				<div>
					<AddCartButton
						product={{
							id: product.id,
							quantity: 1,
							title: locale.title,
							price: store.price as string, //parseFloat().toFixed(2),
							image: product.image
						}}
					/>
					<hr />
				</div>
				<div>
					<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>
			</div>
		</div>
	)
}