import { createFileRoute } from '@tanstack/react-router'
import CartItem from '@/components/cart/CartItem/CartItem';
import GoToCheckoutButton from '@/components/checkout/GoToCheckoutButton/GoToCheckoutButton';
import Breadcrumb from '@/components/common/Breadcrumb/Breadcrumb';
import OrderSummary from '@/components/common/OrderSummary/OrderSummary';

import { useLinesQuery } from '@/queries/orderQuery';

import { Summary } from '@/customTypes/Order';
import useTranslation from '@/utils/translate';

import styles from '@/routes/_main/cart/Cart.module.css';

const Cart = () => {
	const { t } = useTranslation();
	const lines = useLinesQuery(linesInfo => linesInfo);
	const summary = {} as Summary;

	return (
		<main className={`${styles.cartWrapper} containerGrid`}>
			<Breadcrumb
				links={[
					{
						children: t('cart.pageTitle'),
						to: '/cart',
					},
				]}
			/>
			<h1>{t('cart.pageTitle')}</h1>

			<div className={styles.container}>
				<div className={styles.linesContainer}>
					{lines?.map(line => <CartItem key={line.internalid} line={line} />)}
				</div>
				<div className={styles.summaryContainer}>
					<OrderSummary summary={summary} />
					<GoToCheckoutButton />
				</div>
			</div>

			<title>{t('cart.pageTitle')}</title>
		</main>
	)
};

export const Route = createFileRoute('/_main/cart/_cart/')({
	component: Cart,
});