"use client";

import TranslateClient from "@/components/ui/localization/TranslateClient";
import Modal from "@/components/ui/Modal";
import { OrderHistory } from "@/modules/products/order-history";
import Image from "next/image";
import { useEffect, useState } from "react";
import AddInvoice from "../payment/AddInvoice";
import Link from "next/link";

type Props = {
  order: OrderHistory;
  lastElementRef: any;
  allData: any;
  index: number;
};

const badge_style = "px-2 py-1 rounded-[5px] text-white";

const OrderProductCard = ({ order, lastElementRef, allData, index }: Props) => {
  const [openInvoiceModal, setOpenInvoiceModal] = useState(false);
  const [imageSrc, setImageSrc] = useState<string[]>([]);
  const [files, setFiles] = useState<File[]>([]);

  useEffect(() => {
    const sources = order?.invoices?.map((src) => src?.original_url);
    setImageSrc(sources);
  }, [order]);

  const isLastItem = allData?.length - 1 === index;

  return (
    <Link
      ref={isLastItem ? lastElementRef : null}
      href={`order_history/${order.order_id}`}
      className="block border border-gray-200 hover:border-mainBlue transition rounded-xl px-4 py-5 my-5 group space-y-10 relative w-full max-w-xs mx-auto sm:mx-0 sm:max-w-full"
    >
      {/* <LangLink href={`order/${order?.order_id}`}> */}
      <div>
        {/* image and details */}
        <div className="flex gap-3 flex-col sm:flex-row items-center">
          <div className="w-full sm:w-20 h-20 bg-gray-200 rounded-xl overflow-hidden p-1">
            {order?.invoices?.[0]?.extension === "pdf" ? (
              <p className="w-full h-full bg-slate-200 text-slate-700 text-xl flex items-center justify-center font-bold group-hover:scale-110 duration-150">
                PDF
              </p>
            ) : (
              <Image
                className="object-cover object-center group-hover:scale-110 duration-150 aspect-[144/144] rounded-xl w-full h-full"
                src={order?.invoices?.[0]?.original_url}
                alt="bag"
                width={80}
                height={80}
              />
            )}
          </div>
          <div>
            <p className="flex gap-x-1">
              <TranslateClient text="total" />:
              <span>{Number(order?.order_summary?.TotalwithTax)}</span>
              <TranslateClient text="SAR" />
            </p>
            <p className="text-textGray-100">
              <TranslateClient text="order_number" />:{" "}
              {order?.order_summary?.totalQuantity}
            </p>
            <p className="text-textGray-100">
              <TranslateClient text="count" />:{" "}
              {order?.order_summary?.totalQuantity}
            </p>
          </div>
        </div>

        {/* label (accept - pending - reject) */}
        <div className="absolute ltr:right-2 rtl:left-2 top-2 sm:top-5">
          {/* accept */}
          <div
            className={`${badge_style} bg-mainLime ${
              order?.status === "confirm" ? "inline-block" : "hidden"
            }`}
          >
            <TranslateClient text="accepted" />
          </div>
          {/* pending */}
          <div
            className={`${badge_style} bg-orange-400 ${
              order?.status === "pending" ? "inline-block" : "hidden"
            }`}
          >
            <TranslateClient text="pending" />
          </div>
          {/* reject */}
          <div
            className={`flex gap-x-1 items-center ${
              order?.status === "reject" ? "inline-block" : "hidden"
            }`}
          >
            {/* <button
              className={`${badge_style} bg-mainBlue`}
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
                setOpenInvoiceModal(true);
              }}
            >
              <TranslateClient text="add_docs" />
            </button> */}
            <div className={`${badge_style} bg-red-500`}>
              <TranslateClient text="rejected" />
            </div>
          </div>
        </div>
      </div>

      <Modal open={openInvoiceModal} setOpen={setOpenInvoiceModal}>
        <AddInvoice
          setOpenInvoiceModal={setOpenInvoiceModal}
          imageSrc={imageSrc}
          setImageSrc={setImageSrc}
          setFiles={setFiles}
          files={files}
        />
      </Modal>
    </Link>
  );
};

export default OrderProductCard;