import {Order} from '@prisma/client'
import {useTranslations} from 'next-intl'

import {getOrdersByUserId} from '@/actions/admin/order'
import {SignOutButton} from '@/components/auth/forms/sign-out-button'
import CabinetButton from '@/components/shared/header/cabinet-button'
import {type SingedInSession} from '@/lib/permission'
import {dump} from '@/lib/utils'
import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger
} from '@/ui/collapsible'
import {Separator} from '@/ui/separator'

export default async function CabinetIndex({
	slug,
	session
}: {
	slug: string[] | undefined
	session: SingedInSession | null
}) {
	const t = useTranslations('cabinet')
	const orders = await getOrdersByUserId(parseInt(session?.user.id as string))

	return (
		<div className='my-8'>
			<div className='container flex flex-col sm:flex-row'>
				<section className='bw-layout-col-left bw-border-color border-r pt-3'>
					<div className='flex items-center justify-between pr-4'>
						<CabinetButton />
						<div>
							<p className='text-sm'>{session?.user?.name}</p>
							<p className='text-xs'>{session?.user?.email}</p>
						</div>
					</div>
					<Separator className='bw-separator-color my-4' />
					<SignOutButton />
				</section>
				<div className='bw-layout-col-right pt-3'>
					<section className='w-full'>
						<h1 className='text-3xl font-extrabold'>
							{t('personal-information.title')}
						</h1>
						<Separator className='my-4' />
						{orders.map((order: Order) => (
							<div
								key={order.id}
								className='flex items-center justify-start gap-x-9 gap-y-6'
							>
								<div>{order.orderNo}</div>
								<div>
									{order.firstName} {order.surname}
								</div>
								<div>{order.phone}</div>
								<div>{order.email}</div>
								<div>{order.notes}</div>
							</div>
						))}
						{/*<BasicEditor placeholder={'type something'} />*/}
						{/*<Separator className='my-4' />*/}
						{/*{slug ? <code>{slug[0]}</code> : <pre>{dump(session)}</pre>}*/}
						{/*<Collapsible>
							<CollapsibleTrigger>
								Can I use this in my project?
							</CollapsibleTrigger>
							<CollapsibleContent>
								Yes. Free to use for personal and commercial projects. No
								attribution required.
							</CollapsibleContent>
						</Collapsible>*/}
					</section>
				</div>
			</div>
		</div>
	)
}