'use client'

import {Trash2} from 'lucide-react'
import {useTranslations} from 'next-intl'
import Image from 'next/image'
import {useState} from 'react'

import CartPostSubmit from '@/app/[locale]/(root)/(shop)/cart/post-submit'
import styles from '@/components/pages/cart/cart.module.scss'
import CartItems from '@/components/pages/cart/items'
import RegisteredOrderForm from '@/components/pages/cart/registered-order-form'
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
import {Link} from '@/i18n/routing'
import {dump} from '@/lib/utils'
import EmptyCartImage from '@/public/images/empty-cart.svg'
import useCartStore from '@/store/cart-store'
import {SessionUser} from '@/types/auth'
import {Button} from '@/ui/button'

export default function Cart({user}: {user?: SessionUser | null}) {
	const t = useTranslations('cart')
	const [submitResult, setSubmitResult] = useState({})
	const {cartItems, clearCart} = useCartStore()
	const totalSum = cartItems.reduce(
		(total, product) => total + parseFloat(product.price) * product.quantity,
		0
	)

	const resultSubmit = (result: any) => {
		setSubmitResult(result)
	}

	return (
		<div className='mt-1'>
			<div className='container'>
				<section className='bw-cart-wrapper mx-auto my-8 max-w-[640px] text-brand-violet'>
					{cartItems && cartItems.length > 0 ? (
						<>
							<div className='mb-6 flex items-center justify-between border-b border-b-brand-violet pb-2'>
								<h1 className='text-3xl font-bold'>{t('basket')}</h1>
								<Button
									variant={'ghost'}
									className='rounded-0 h-[3rem] w-[3rem] px-0 text-brand-violet'
									onClick={() => clearCart()}
									title={t('clear_cart')}
								>
									<Trash2 size={24} />
								</Button>
							</div>

							<header className='flex text-xl'>
								<div className='col'>{t('title')}</div>
								<div className='flex-none'>{t('quantity')}</div>
								<div className='col text-right'>{t('amount')}</div>
							</header>
							<CartItems cartItems={cartItems} />

							<footer className='my-8 flex py-4 text-xl'>
								<div className='col'></div>
								<div className='flex-none'>{t('total')}:</div>
								<div className='col text-right font-bold'>
									{totalSum.toFixed(2)} грн
								</div>
							</footer>

							<section className={styles.bwOrderForm}>
								<h2 className='pb-9'>Оформлення замовлення</h2>
								<Tabs defaultValue='registered' className='w-full'>
									<TabsList className='grid w-full grid-cols-2'>
										<TabsTrigger value='registered'>
											Постійний клієнт
										</TabsTrigger>
										<TabsTrigger value='quick-order'>
											Швидке замовлення
										</TabsTrigger>
									</TabsList>
									<TabsContent value='registered' className='mt-5'>
										<RegisteredOrderForm
											styles={styles.registeredForm}
											user={user}
											onSubmitHandler={resultSubmit}
										/>
									</TabsContent>
									<TabsContent value='quick-order'>quick-order</TabsContent>
								</Tabs>
							</section>
						</>
					) : Object.keys(submitResult).length === 0 ? (
						<div className='flex flex-col items-center justify-center gap-y-8'>
							<Image
								src={EmptyCartImage}
								sizes='88vw'
								alt={t('empty')}
								unoptimized={true}
								style={{
									width: '88%',
									height: 'auto',
									margin: '1rem auto'
								}}
							/>
							<Link href={'/catalog'} className='px-6 py-2'>
								<button className='rounded border border-brand-violet bg-transparent px-4 py-2 font-semibold text-brand-violet hover:border-transparent hover:bg-brand-yellow-300 hover:text-brand-violet-700'>
									{t('do_purchase')}
								</button>
							</Link>
						</div>
					) : (
						<CartPostSubmit result={submitResult} />
					)}
				</section>
			</div>
		</div>
	)
}