import React, { useState } from "react";
import style from "./productCard.module.css";
import Image from "next/image";
import NextImage from "@/other/NextImage";
import { createNotification } from "@/customHook/useNotification";
import { managerApi } from "@/api/api";
import Loader from "@/components/utils/loader";

const ProductCard = (props) => {
  const [returnInvoicePDFBtnLoader, setReturnInvoicePDFBtnLoader] =
    useState(false);
  const downloadReturnInvoice = async (id) => {
    try {
      setReturnInvoicePDFBtnLoader(true);
      const response = await managerApi.get(
        "/customer/invoice/return/pdf?invoice_id=" + id,
        {
          responseType: "blob",
        }
      );

      console.log("response.data", response.data);
      const downloadUrl = window.URL.createObjectURL(new Blob([response.data]));
      const invoicePDF = downloadUrl;
      const link = document.createElement("a");
      link.href = invoicePDF;
      link.setAttribute("download", "invoice_" + id + ".pdf");
      document.body.appendChild(link);
      link.click();
      link.remove();

      setReturnInvoicePDFBtnLoader(false);
    } catch (err) {
      setReturnInvoicePDFBtnLoader(false);
      createNotification("error", "Something went wrong");
      console.log(err);
    }
  };

  return (
    <div
      className={`${style.product_section} ${style.box_design}`}
      key={props.order.name}
    >
      <div className={style.product_data_section}>
        <div className={style.product_data}>
          {props.order &&
            props.order.image &&
            props.order.image.length > 0 &&
            props.order.image[0] && (
              <div className={style.product_image}>
                <NextImage
                  src={
                    props.order.image.length > 0 &&
                    process.env.NEXT_PUBLIC_UPLOADS +
                      "/products/" +
                      props.order.image[0]
                  }
                  alt="image"
                  fill
                />
              </div>
            )}
          <div className={style.selectBox}>
            <div>
              Order No: <span>{props.order._id}</span>
            </div>
            <div>
              Name:{" "}
              <span>
                {props.order.name
                  .replaceAll("<b>", "")
                  .replaceAll("</b>", "")
                  .replaceAll("<i>", "")
                  .replaceAll("</i>", "")
                  .replaceAll("</br>", "")}
              </span>
            </div>
          </div>
        </div>

        <div className={style.product_price}>
          <div className={style.purchase_detail}>
            <div className={`${style.purchase_data} ${style.color_dark}`}>
              <div
                className={`${style.return_status} ${
                  props.order.status === "return (processing)"
                    ? style.processing
                    : style.completed
                }`}
              >
                {props.order.status === "return (processing)"
                  ? "Processing"
                  : "Completed"}
              </div>
            </div>
            <div className={style.return_btn_section}>
              {props.order.invoice_no &&
                props.order.order_invoice_no &&
                (!returnInvoicePDFBtnLoader ? (
                  <button
                    className={`secondary-btn ${style.custom_secondary}`}
                    type="button"
                    onClick={() =>
                      downloadReturnInvoice(props.order.invoice_no)
                    }
                  >
                    Return Invoice
                  </button>
                ) : (
                  <button className={`secondary-btn ${style.custom_secondary}`}>
                    <Loader className={style.btnLoader} />
                  </button>
                ))}
            </div>
          </div>
        </div>
      </div>
      <hr />
      <div>
        Order ID : <span>{props.order._id}</span>
      </div>
    </div>
  );
};

export default ProductCard;
