"use client"
import Price from '@/components/sharedComponents/product/Price'
import ImageWithFallback from '@/components/UiComponents/ImageWithFallback'
import LocalePath from '@/components/UiComponents/LocalePath'
import React from 'react'
import { Checkbox } from 'antd';
import { OutlinedStarIcon, ReturnIcon } from '@/assets/svgs/Icons';
import { useDispatch } from 'react-redux';
import { AppDispatch } from '@/store/store';
import { openRateModal, openRecoveryModal } from '@/store/order';
import { useTranslations } from 'next-intl'
import { cn } from '@/utils/helpers'

interface Product{
    withCheckBox?:boolean;
    isOrderComplete?:boolean;
    toggleCheckbox?:(e:any)=>void;
    item:any;
    orderId?:any;
}

const OrderProductItem = ({withCheckBox,toggleCheckbox,isOrderComplete,item,orderId}:Product) => {

    const t = useTranslations();
    const dispatch = useDispatch<AppDispatch>();

    return (
            <div className={"border-b border-b-platinum pb-4 last:border-b-0 relative"}>
                {item?.status == "cancelled" && (
                    <p 
                        className='absolute top-6 end-0 text-lg rounded-lg w-fit px-5 -rotate-45 h-8 flex-center-content z-10 text-center bg-error/[.8] text-white  font-bold mb-1'
                    >
                        {t("orders.cancelled")}
                    </p>
                )}
                <div className={cn("flex items-center gap-2",item?.status == "cancelled" && "bg-secColor opacity-50")}>
                    <div className="p-4 rounded-xl bg-gray-100 flex justify-center items-center relative">
                        <ImageWithFallback
                            src={item?.image}
                            alt={item?.name}
                            width={200}
                            height={200}
                            className="size-[70px] object-contain"
                        />
                    </div>
                    <div className="flex flex-col gap-1.5 text-sm">
                        <p className=" text-gray-300">{item?.brand?.name}</p>
                        <LocalePath
                            href={`/products/${item?.slug}`}
                            className="font-semibold  line-clamp-1"
                        >
                                (x{item?.quantity})
                                {item.name}                            
                        </LocalePath>
                        <Price product={item} isSmall />
                        {withCheckBox && (
                            <Checkbox 
                                id={item?.id}
                                onChange={toggleCheckbox} 
                                rootClassName='absolute top-3 end-1.5 ' 
                            />
                        )}
                    </div>
                </div>
                {isOrderComplete && item?.status != "cancelled" &&(
                    <div className="complete-order-btns">
                        {!item?.is_refundable && (
                            <button  
                                onClick={()=>dispatch(openRecoveryModal({selectedItem:item}))} 
                                className="text-gray-200 border border-gray-100 "
                            >
                                {t("Text.return")} <ReturnIcon/>
                            </button>
                        )}
                        {!item?.is_rated && (
                            <button 
                                onClick={()=>dispatch(openRateModal({isTrader:false,selectedItem:{...item,order_id:orderId}}))} 
                                className="text-primary !bg-secprimary"
                            >
                                {t("Text.PRODUCT_RATE")} <OutlinedStarIcon/>
                            </button>
                        )}
                    </div>
                )}
            </div>
    )
}

export default OrderProductItem