"use client"
import { DateIcon } from '@/assets/svgs/Icons'
import ChangeStatus from '@/components/pagesComponents/received-orders/ChangeStatus'
import { Tag } from 'antd';
import { useTranslations } from 'next-intl';
import { useEffect, useState } from 'react';

interface Props {
hasBtn?:boolean;
order?:any;
isReturn?:Boolean;
}
const OrderInfo = ({hasBtn,order,isReturn = false}:Props) => {
  const t = useTranslations();
  const [tempStatus, setTempStatus] = useState(isReturn ? order?.return_status : order?.status);

  useEffect(()=>{
    if(isReturn){
      setTempStatus(order?.return_status)
    }else{
      setTempStatus(order?.status)
    }
  },[order])

  return (
    <div className="my-8 app-card-wrapper">
          <div className="flex item-center justify-between">
            <div className="space-y-5">
              <div className="flex items-center gap-5">
                <h2 className="text-gray-300 text-2xl font-bold">
                  {t(`orders.${isReturn ?"return_number":"order_number"}`)} <span className="text-text-gray">{`#${isReturn ?order?.uuid : order?.order_number}`}</span>
                </h2>
                <Tag
                  className='px-4 py-2 inline-block text-sm rounded-[48px] font-semibold'
                  color={
                    tempStatus === "pending"
                      ? "gray"
                      : tempStatus == "prepared"
                      ? "purple"
                      : tempStatus === "cancelled"
                      ? "red"
                      : tempStatus === "shipped"
                      ? "gold":"green"
                  }
                >
                  {t(`status.${tempStatus}`)}
                </Tag>
                {/* <span className={`px-4 py-2 inline-block text-sm rounded-[48px] success-status font-semibold`}>
                  {t("Text.returned")}
                </span> */}

              </div>
              <p className="text-lg font-semibold text-[#111213] flex items-center gap-2">
                <DateIcon className="size-5" /> {order?.created_at}
              </p>
            </div>
          {
            hasBtn && 
            (isReturn ? order?.is_returnable : true) && 
            !["cancelled", "completed", "returned","rejected"].includes(order?.status || order?.return_status) && (
              <ChangeStatus 
                type={isReturn ? "return" : "order"} 
                tempStatus={tempStatus} 
                setTempStatus={setTempStatus} 
                order={order} 
              />
            )
          }
          </div>
        </div>
  )
}

export default OrderInfo