/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @next/next/no-img-element */
import React from "react";

interface AddressPrintTemplateSmallProps {
  order?: {
    recipientName?: string;
    recipientAddress?: string;
    recipientPhone?: string;
    paymentType?: string;
    blockNo?: string;
    senderName?: string;
    senderAddress?: string;
    senderPostcode?: string;
    qrCode?: string;
    trackingNumber?: string;
    barCode?: string;
    order?: any;
    generated_order_package_id: string;
    recipientPhoneNumber?: string;
    senderPhoneNumber?: string;
  };
}

const AddressPrintTemplateSmall: React.FC<AddressPrintTemplateSmallProps> = ({
  order,
}) => {
  return (
    <div
      style={{
        width: "384px",
        maxHeight: "576px",
        overflow: "hidden",
        padding: "4px 3px",
        border: "2px solid #000",
        justifySelf: "center",
      }}
    >
      <style>
        {`
          * {
            font-family: "Roboto", sans-serif;
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
          }
          table, th, td {
            border:1px solid #757575;
            border-collapse: collapse;
          }
        `}
      </style>
      <table
        style={{
          width: "100%",
          border: 0,
          borderSpacing: "3px",
          borderCollapse: "collapse",
          backgroundImage:
            "url(https://demo.syntrio.in/designs/delybell-customer/images/Delybell-Waybill.jpg)",
          backgroundSize: "contain",
          backgroundRepeat: "repeat-x",
        }}
      >
        <thead>
          <tr>
            <th
              style={{
                width: "55%",
                height: "56px",
                padding: "5px",
                textAlign: "left",
                borderRight: 0,
              }}
            >
              <img
                src="https://demo.syntrio.in/designs/delybell-admin/img/app/logo-hat.png"
                style={{ width: "120px", height: "auto" }}
                alt="Logo"
              />
            </th>
            <th
              style={{
                width: "45%",
                padding: "5px",
                textAlign: "end",
                borderLeft: 0,
              }}
            >
              <img
                src={order?.order?.bar_code || "https://demo.syntrio.in/designs/delybell-admin/img/app/barcode.png"}
                style={{ height: "75px" }}
                alt="Barcode"
              />
            </th>
          </tr>
        </thead>
        <tbody>
          {/* spacing row */}
          <tr>
            <td colSpan={2} style={{ height: "3px", border: 0 }}></td>
          </tr>

          {/* Recipient / Order */}
          <tr>
            <th style={{ width: "55%", padding: "5px", textAlign: "left" }}>
              <h3 style={{ margin: 0, fontWeight: 600, fontSize: "13px" }}>
                Recipient Details
              </h3>
            </th>
            <th style={{ width: "45%", padding: "5px", textAlign: "left" }}>
              <h3 style={{ margin: 0, fontWeight: 600, fontSize: "13px" }}>
              {order?.order?.generated_order_id ??
                          "Order Details (Courier)"}
              </h3>
            </th>
          </tr>

          <tr>
            <th
              rowSpan={2}
              style={{ width: "55%", padding: "5px", textAlign: "left" }}
            >
              <p style={{ margin: "0 0 5px", fontWeight: 600 }}>
                {order?.recipientName || ""}
              </p>
              <p style={{ margin: "0 0 5px", fontWeight: 400 }}>
                {order?.recipientAddress || ""}
              </p>
              <p style={{ margin: 0, fontWeight: 400 }}>
                {order?.recipientPhoneNumber || ""}
              </p>
            </th>
            <th style={{ width: "45%", padding: "5px", textAlign: "center" }}>
              <p style={{ margin: 0, fontWeight: 700, fontSize: "26px" }}>
                {order?.paymentType || "---"}
              </p>
            </th>
          </tr>
          <tr>
            <th style={{ width: "45%", padding: "5px", textAlign: "center" }}>
              <p style={{ margin: 0, fontWeight: 700, fontSize: "26px" }}>
                {order?.blockNo || "---"}
              </p>
            </th>
          </tr>

          {/* spacing row */}
          <tr>
            <td colSpan={2} style={{ height: "3px", border: 0 }}></td>
          </tr>

          {/* Sender / QR */}
          <tr>
            <th
              style={{ width: "55%", padding: "5px", textAlign: "left" }}
            >
              <h3 style={{ margin: 0, fontWeight: 600, fontSize: "13px" }}>
                Sender Details
              </h3>
            </th>
            <th
              rowSpan={2}
              style={{ width: "45%", textAlign: "center", padding: "5px" }}
            >
              <img
                src={order?.qrCode || "https://demo.syntrio.in/designs/delybell-admin/img/app/qr-code.png"}
                style={{ height: "75px" }}
                alt="QR Code"
              />
              <h3
                style={{
                  margin: 0,
                  fontWeight: 400,
                  fontSize: "12px",
                  padding: "5px",
                }}
              >
                {order?.generated_order_package_id || "11"}
              </h3>
            </th>
          </tr>
          <tr>
            <th
              rowSpan={3}
              style={{ width: "55%", padding: "5px", textAlign: "left" }}
            >
              <p style={{ margin: "0 0 5px", fontWeight: 600 }}>
                {order?.senderName || "---"}
              </p>
              <p style={{ margin: "0 0 5px", fontWeight: 400 }}>
                {order?.senderAddress || "---"}
              </p>
              <p style={{ margin: 0, fontWeight: 400 }}>
                {order?.senderPhoneNumber || ""}
              </p>
            </th>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default AddressPrintTemplateSmall;