"use client"
import Image from 'next/image'
import React, { useContext, useEffect, useState } from 'react'
import { CartContext, productTotal } from '../../../components/AppContext'
import { useParams } from 'next/navigation'
import AddressInfo from '../../../components/layout/AddressInfo'

const OrdersPage = () => {
    const {clearCart} = useContext(CartContext);
    const {id} = useParams();
    const [order, setOrder] = useState();

    useEffect(() => {
        if(typeof window !== 'undefined'){
            if(window.location.href.includes('clear-cart=1')){
                clearCart();
            }
        }
        if(id){
            fetch('/api/orders?_id='+id).then(res => {
                res.json().then(orderData => {
                    setOrder(orderData);
                })
            })
        }
    }, [])


    let subtotal = 0
    if(order?.cartProducts){
        for(const product of order?.cartProducts){
            subtotal += productTotal(product)
        }
    }


  return (
    <div className='pb-20 md:pb-40'>
        <div className='px-5 md:px-10 py-5 sm:py-10 max-w-xl mx-auto'>
            {order?.paid ? (
            <div className='flex flex-col gap-4 items-center justify-center text-center mb-10'>
                <Image src='/check.png' width={100} height={100} alt='checked' className='mb-5'/>
                <p className='uppercase'>Thank you</p>
                <p className='uppercase text-xl'>Your order is confirmed</p>
                <button type='button' className='p-2 bg-pink-500 rounded-md text-xs text-white hover:opacity-80 uppercase'>Track your order</button>
            </div>
            ) : (
            <div className='flex flex-col gap-4 items-center justify-center text-center mb-10'>
                <Image src='/cross.png' width={100} height={100} alt='checked' className='mb-5'/>
                <p className='uppercase text-red-600'>Action needed</p>
                <p className='uppercase text-xl text-red-600'>Payment is required</p>
            </div>
            )
        }
            
            {order&& (
                <div className='flex flex-col gap-5 py-5 px-5 border rounded-md shadow-md'>
                    <div className='border-b pb-5'>
                        <p className='mb-5 text-pink-500 font-semibold text-center'>Order Summary</p>
                        {order.cartProducts.map(product => (
                            <div key={product._id} className='flex justify-between'>
                                <div>
                                    <p className='w-[150px] lg:w-[300px] text-ellipsis whitespace-nowrap overflow-hidden text-gray-800 text-xs sm:text-sm font-bold'>{product.itemName}</p>
                                    {product.size && (
                                        <div className='text-gray-800 font-semibold text-xs sm:text-sm'>Size: <span className='text-[10px] sm:text-xs text-gray-600'>{product.size.itemName}</span></div>
                                    )}
                                    {product.extra?.length > 0 && (
                                        <div className='text-gray-800 font-semibold text-xs sm:text-sm flex gap-1 items-center'>Add: {product.extra.map(extras => (
                                            <span key={extras._id} className='text-[10px] sm:text-xs text-gray-600'>{extras.itemName} (+${extras.price})</span>
                                            ))}
                                        </div>
                                    )}
                                </div>
                                <div>
                                    <p className='text-gray-800 text-xs sm:text-sm font-semibold'>${productTotal(product)}</p>
                                </div>
                            </div>
                        ))}
                        <div className='flex justify-end text-gray-800'>
                        <div className='flex flex-col gap-1 mt-5 md:mt-10 text-xs sm:text-sm'>
                            <div className='flex gap-10 justify-between font-semibold'>
                                <p>Subtotal:</p>
                                <p className='ml-5 text-end'>${subtotal.toFixed(2)}</p>
                            </div>
                            <div className='flex gap-10 justify-between font-semibold'>
                                <p>Delivery:</p>
                                <p className='ml-5 text-end'>$4.99</p>
                            </div>
                            <div className='flex gap-10 justify-between font-semibold'>
                                <p>Order total:</p>
                                <p className='ml-5 text-end'>${(subtotal + 4.99).toFixed(2)}</p>
                            </div>
                        </div>
                    </div>
                    </div>
                    <div>
                        <div className='text-sm max-w-md mx-auto'>
                            <p className='mb-5 font-semibold text-center text-base text-pink-500'>Delivery Address</p>
                            <AddressInfo addressProps={order} disabled={true}/>
                        </div>
                    </div>
                </div>
            )}
        </div>
    </div>
  )
}

export default OrdersPage