import React, { forwardRef } from "react";
import { PropTypes } from "prop-types";
import signature from "../../../../assets/images/signature.png";
import moment from "moment";
import { formatJustDate, formatJustTime } from "../../../../utils/formatTime";
import PersianDate from "persian-date";

const styles = {
  documentTitle: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    fontSize: "12px",
  },
  row: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "start",
    gap: "5px",
    direction: "rtl",
  },
  column: {
    display: "flex",
    height: "100px",
    borderStyle: "solid",
    borderWidth: "1px",
    justifyContent: "center",
    alignItems: "center",
    fontSize: "12px",
  },
  itemsColumn: {
    display: "flex",
    height: "100px",
    borderStyle: "solid",
    borderWidth: "1px",
    justifyContent: "center",
    alignItems: "center",
    fontSize: "12px",
  },
  item: {
    display: "flex",
    gap: "5px",
    marginTop: "10px",
    alignItems: "center",
  },
  itemTitle: { fontSize: "12px", fontWeight: "bolder" },
  itemText: { fontSize: "10px" },
  invoiceTable: {
    width: "100%",
    borderCollapse: "collapse",
    alignSelf: "center",
  },
  tableCell: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 11,
    padding: "10px",
    fontFamily: "iranyekan",
  },
  tableCellTexts: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 12,
    padding: "10px",
    fontFamily: "iranyekan",
  },
  tableCellAlert: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 9,
    color: "red",
  },
  tableCellMobile: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 9,
  },
  tableInnerCell: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 7,
    whiteSpace: "nowrap",
  },
  tableHeader: {
    pageBreakAfter: "auto",
  },
  headerRow: {
    backgroundColor: "#eee",
    pageBreakInside: "avoid",
    pageBreakAfter: "auto",
  },
  tableHeaderCell: {
    backgroundColor: "#eee",
    fontSize: 10,
    border: "1px solid #000",
    padding: "4px",
    textAlign: "center",
    fontWeight: "bold",
    minWidth: "100px",
  },
  tableHeaderCellText: {
    backgroundColor: "#eee",
    fontSize: 10,
    border: "1px solid #000",
    padding: "4px",
    textAlign: "center",
    fontWeight: "bold",
    minWidth: "260px",
  },
};

const ProvincePaymentFactorFile = forwardRef(
  ({ item, isUnion, union, user }, ref) => {
    const sellerItems = [
      {
        title: "فروشنده",
        text: isUnion ? union?.unitName || "-" : "هوشمند سازان ",
      },
      {
        title: "شناسه ملی",
        text: isUnion ? union?.unitNationalId || "-" : "14013838372",
      },
      {
        title: "شماره ثبت",
        text: isUnion ? union?.unitRegistrationNumber || "-" : "17514",
      },
      {
        title: "استان",
        text: isUnion ? union?.unitProvince || "-" : "البرز",
      },
      {
        title: "شهرستان",
        text: isUnion ? union?.unitCity || "-" : "کرج",
      },
      {
        title: "تلفن",
        text: isUnion ? union?.mobile || "-" : "(021)28421237",
      },
      {
        title: "کد پستی",
        text: isUnion ? union?.unitPostalCode || "-" : "3139735185",
      },
      {
        title: "نشانی",
        text: isUnion ? union?.unitAddress || "-" : "نبش بلوار سرداران",
      },
    ];

    const buyerItems = [
      {
        title: "فروشنده",
        text: user?.unitName || "-",
      },
      {
        title: "شناسه ملی",
        text: user?.unitNationalId || "-",
      },
      {
        title: "شماره ثبت",
        text: user?.unitRegistrationNumber || "-",
      },
      {
        title: "استان",
        text: user?.unitProvince || "-",
      },
      {
        title: "شهرستان",
        text: user?.unitCity || "-",
      },
      {
        title: "تلفن",
        text: user?.mobile || "-",
      },
      {
        title: "کد پستی",
        text: user?.unitPostalCode || "-",
      },
      {
        title: "نشانی",
        text: user?.unitAddress || "-",
      },
    ];

    return (
      <div ref={ref} style={{ fontFamily: "iranyekan" }}>
        <div style={styles.documentTitle}>
          <h2>صورتحسـاب فروش کالا و خدمات</h2>
        </div>
        <div style={styles.row}>
          <div
            style={{ ...styles.column, backgroundColor: "#eee", width: "5%" }}
          >
            <span style={{ writingMode: "vertical-lr", rotate: "180deg" }}>
              فروشنده
            </span>
          </div>
          <div style={{ ...styles.itemsColumn, width: "85%" }}>
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(4, 1fr)",
                gap: "5px",
                padding: "10px",
                width: "100%",
              }}
            >
              {sellerItems?.map((option, i) => (
                <div style={styles.item} key={i}>
                  <span style={styles.itemTitle}>{option.title}:</span>
                  <span style={styles.itemText}>{option.text}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ ...styles.column, width: "10%" }}>
            <div
              style={{
                display: "grid",
              }}
            >
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: 0,
                }}
              >
                <span style={{ fontSize: "11px", fontWeight: "bolder" }}>
                  شماره فاکتور: {"‌"}
                </span>
                <span style={{ fontSize: "11px" }}>
                  {moment(new PersianDate()).format("YYMMDD")}
                </span>
              </div>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  marginTop: "10px",
                }}
              >
                <span style={{ fontSize: "11px", fontWeight: "bolder" }}>
                  تاریخ: {"‌"}
                </span>
                <span style={{ fontSize: "11px" }}>
                  {new PersianDate().toLocale("fa").format("YYYY/MM/DD")}
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* second row  */}

        <div style={{ ...styles.row, marginTop: "3px" }}>
          <div
            style={{ ...styles.column, backgroundColor: "#eee", width: "5%" }}
          >
            <span style={{ writingMode: "vertical-lr", rotate: "180deg" }}>
              خریدار
            </span>
          </div>
          <div style={{ ...styles.itemsColumn, width: "85%" }}>
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(4, 1fr)",
                gap: "5px",
                padding: "10px",
                width: "100%",
              }}
            >
              {buyerItems?.map((option, i) => (
                <div style={styles.item} key={i}>
                  <span style={styles.itemTitle}>{option.title}:</span>
                  <span style={styles.itemText}>{option.text}</span>
                </div>
              ))}
            </div>
          </div>
          <div
            style={{
              display: "flex",
              height: "100px",
              marginRight: "2px",
              width: "10%",
            }}
          ></div>
        </div>

        {/* table row  */}

        <div style={{ ...styles.row, marginTop: "3px" }}>
          <table style={styles.invoiceTable}>
            <thead style={styles.tableHeader}>
              <tr style={styles.headerRow}>
                <th style={{ ...styles.tableHeaderCell, minWidth: "30px" }}>
                  ردیف
                </th>
                <th style={styles.tableHeaderCellText}>شرح خدمت</th>
                <th style={styles.tableHeaderCell}>مبلغ واحد (ریال)</th>
                <th style={styles.tableHeaderCell}>
                  جمع مالیات و عوارض ارزش افزوده (ریال)
                </th>
                <th style={styles.tableHeaderCell}>مبلغ کل (ریال)</th>
                <th style={styles.tableHeaderCell}>تخفیف (ریال)</th>
                <th style={styles.tableHeaderCell}>
                  جمع کل پس از تخفیف
                  <br />( با احتساب مالیات و عوارض ) ریال
                </th>
              </tr>
            </thead>
            <tbody>
              {isUnion ? (
                <>
                  <tr style={styles.tableRow}>
                    <td style={styles.tableCell}>1</td>
                    <td style={styles.tableCellTexts}>
                      تعرفه استفاده از سامانه رصدیار
                      <br />
                      (سهم اتحادیه مرغداران گوشتی)
                    </td>
                    <td style={styles.tableCell}>
                      {((item?.unionShare / 100) * 90).toLocaleString()}
                    </td>
                    <td style={styles.tableCell}>
                      {((item?.unionShare / 100) * 10).toLocaleString()}
                    </td>
                    <td style={styles.tableCell}>
                      {item?.unionShare.toLocaleString()}
                    </td>
                    <td style={styles.tableCell}>0</td>
                    <td style={styles.tableCell}>
                      {item?.unionShare.toLocaleString()}
                    </td>
                  </tr>
                  <tr style={styles.tableRow}>
                    <td style={styles.tableCell}>2</td>
                    <td style={styles.tableCellTexts}>
                      تعرفه استفاده از سامانه رصدیار
                      <br />
                      (سهم صنف پروتئین)
                    </td>
                    <td style={styles.tableCell}>
                      {((item?.guildsShare / 100) * 90).toLocaleString()}
                    </td>
                    <td style={styles.tableCell}>
                      {" "}
                      {((item?.guildsShare / 100) * 10).toLocaleString()}
                    </td>
                    <td style={styles.tableCell}>
                      {item?.guildsShare.toLocaleString()}
                    </td>
                    <td style={styles.tableCell}>0</td>
                    <td style={styles.tableCell}>
                      {item?.guildsShare.toLocaleString()}
                    </td>
                  </tr>
                  <tr style={styles.tableRow}>
                    <td style={styles.tableCell}>3</td>
                    <td style={styles.tableCellTexts}>
                      تعرفه استفاده از سامانه رصدیار
                      <br />
                      (سهم دامپزشک فارم)
                    </td>
                    <td style={styles.tableCell}>
                      {" "}
                      {((item?.otherShare / 100) * 90).toLocaleString()}
                    </td>
                    <td style={styles.tableCell}>
                      {((item?.otherShare / 100) * 10).toLocaleString()}
                    </td>
                    <td style={styles.tableCell}>
                      {item?.otherShare.toLocaleString()}
                    </td>
                    <td style={styles.tableCell}>0</td>
                    <td style={styles.tableCell}>
                      {item?.otherShare.toLocaleString()}
                    </td>
                  </tr>
                </>
              ) : (
                <tr style={styles.tableRow}>
                  <td style={styles.tableCell}>1</td>
                  <td style={styles.tableCellTexts}>
                    تعرفه استفاده از سامانه رصدیار
                    <br />
                    (سهم شرکت هوشمند سازان)
                  </td>
                  <td style={styles.tableCell}>
                    {((item?.companyShare / 100) * 90).toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>
                    {((item?.companyShare / 100) * 10).toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.companyShare.toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>0</td>
                  <td style={styles.tableCell}>
                    {item?.companyShare.toLocaleString()}
                  </td>
                </tr>
              )}

              {isUnion ? (
                <tr style={styles.tableRow}>
                  <td
                    style={{ ...styles.tableCell, backgroundColor: "#eee" }}
                    colSpan={2}
                  >
                    جمع کل
                  </td>
                  <td style={styles.tableCell}>
                    {(
                      ((item?.unionShare +
                        item?.guildsShare +
                        item?.otherShare) /
                        100) *
                      90
                    ).toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>
                    {(
                      ((item?.unionShare +
                        item?.guildsShare +
                        item?.otherShare) /
                        100) *
                      10
                    ).toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>
                    {" "}
                    {(
                      item?.unionShare +
                      item?.guildsShare +
                      item?.otherShare
                    ).toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>0</td>
                  <td style={styles.tableCell}>
                    {" "}
                    {(
                      item?.unionShare +
                      item?.guildsShare +
                      item?.otherShare
                    ).toLocaleString()}
                  </td>
                </tr>
              ) : (
                <tr style={styles.tableRow}>
                  <td
                    style={{ ...styles.tableCell, backgroundColor: "#eee" }}
                    colSpan={2}
                  >
                    جمع کل
                  </td>
                  <td style={styles.tableCell}>
                    {((item?.companyShare / 100) * 90).toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>
                    {((item?.companyShare / 100) * 10).toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.companyShare.toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>0</td>
                  <td style={styles.tableCell}>
                    {item?.companyShare.toLocaleString()}
                  </td>
                </tr>
              )}

              <tr style={{ height: "120px" }}>
                <td style={styles.tableCell} colSpan={9}>
                  <div
                    style={{
                      display: "flex",
                      height: "120px",
                      alignItems: "start",
                      justifyContent: "center",
                    }}
                  >
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "space-around",
                        alignItems: "start",
                        width: "100%",
                      }}
                    >
                      <div style={{ display: "grid" }}>
                        <span style={{ fontSize: "12px" }}>
                          {" "}
                          مهر و امضای فروشنده:
                        </span>
                        {!isUnion && (
                          <img
                            src={signature}
                            alt="امضا"
                            style={{ height: "90px", marginTop: "20px" }}
                          />
                        )}
                      </div>
                      <div style={{ fontSize: "12px" }}>
                        مهر و امضای خریدار:
                      </div>
                    </div>
                  </div>
                  <div
                    style={{
                      width: "100%",
                      display: "flex",
                      justifyContent: "start",
                    }}
                  >
                    {isUnion && (
                      <span style={{ color: "red", fontSize: "11px" }}>
                        * توجه: مبلغ کل به حساب اتحادیه مرغداران گوشتی استان
                        واریز گردیده است .
                      </span>
                    )}
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          style={{
            width: "100%",
            display: "flex",
            justifyContent: "center",
            direction: "rtl",
            marginTop: "10px",
            alignItems: "center",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              gap: "10px",
              alignItems: "center",
              width: "100%",
            }}
          >
            <div>
              <span style={{ fontSize: "13px", fontWeight: "bolder" }}>
                اطلاعات تراکنش{" "}
              </span>
            </div>
            <div>
              <span style={{ fontSize: "11px" }}>
                تاریخ پرداخت:{" "}
                {item?.date &&
                  `${formatJustDate(item?.date)} ساعت (${formatJustTime(
                    item?.date
                  )})`}
              </span>
            </div>
            <div>
              <span style={{ fontSize: "11px" }}>
                نوع پرداخت:{" "}
                {item?.transactionType === "wage-gateway-auto"
                  ? "آنلاین"
                  : item?.transactionType === "correspondence"
                  ? "مکاتبات"
                  : "دستی"}
              </span>
            </div>
            <div>
              <span style={{ fontSize: "11px" }}>کد پیگیری: {item?.refId}</span>
            </div>
            <div>
              <span style={{ fontSize: "11px" }}>
                شماره کارت: {item?.cardHolderPan}
              </span>
            </div>
          </div>
        </div>
      </div>
    );
  }
);

ProvincePaymentFactorFile.displayName = "ProvincePaymentFactorFile";

export default ProvincePaymentFactorFile;

ProvincePaymentFactorFile.propTypes = {
  item: PropTypes.object,
};
