import React, { forwardRef } from "react";
import logo from "../../../../assets/images/ChickenLogo.png";
import { useSystemName } from "../../../../utils/getSystemName";
import { PropTypes } from "prop-types";
import { formatJustDate, formatJustTime } from "../../../../utils/formatTime";
import { useCeoName } from "../../../../utils/getCeoName";

const styles = {
  page: {
    width: "210mm",
    height: "297mm",
    display: "flex",
    margin: "0 auto",
    flexDirection: "column",
    position: "relative",
    direction: "rtl",
    fontFamily: "nazanin",
    fontWeight: "bold",
  },
  container: {
    width: "95%",
    alignSelf: "center",
    pageBreakInside: "avoid",
  },
  p: {
    fontFamily: "nazanin",
    fontWeight: "bold",
    pAlign: "justify",
  },
  span: {
    fontFamily: "nazanin",
    fontWeight: "bold",
    pAlign: "justify",
  },
  invoiceTable: {
    width: "100%",
    borderCollapse: "collapse",
    alignSelf: "center",
  },
  tableCell: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 12,
  },
  tableCellMobile: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 10,
  },
  tableInnerCell: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 8,
    whiteSpace: "nowrap",
  },
  tableHeader: {
    pageBreakAfter: "auto",
  },
  headerRow: {
    color: "black",
    pageBreakInside: "avoid",
    pageBreakAfter: "auto",
  },
  tableRowEven: {
    backgroundColor: "rgba(170, 183, 255, 0.3)",
  },
  logo: {
    width: "60px",
    height: "auto",
    marginBottom: "10px",
  },
  contentContainer: {
    display: "flex",
    justifyContent: "space-between",
    marginTop: "20px",
    marginLeft: "100px",
    marginRight: "30px",
  },
  contentInLine: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
  },
  mainTitle: {
    fontFamily: "nazanin",
    fontSize: 11,
    pAlign: "center",
    fontWeight: "bolder",
  },
  signature: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-end",
    marginLeft: "20px",
  },
  watermarkContainer: {
    position: "fixed",
    top: 450,
    left: 0,
    right: 30,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
    opacity: 0.2,
    zIndex: -1,
  },
  watermarkp: {
    fontSize: 100,
    fontWeight: "bolder",
    color: "grey",
    transform: "rotate(-45deg)",
    left: "50%",
  },
  title: {
    fontSize: 12,
    fontWeight: "bolder",
    pAlign: "center",
  },
  titleTopic: {
    marginTop: "10px",
    fontSize: 12,
    fontWeight: "bolder",
    pAlign: "center",
  },
  firsttitle: {
    fontSize: 14,
    fontWeight: "bolder",
    marginLeft: "40px",
    pAlign: "center",
  },
  title2: {
    fontSize: 10,
    marginBottom: 10,
    pAlign: "center",
  },
  options: {
    padding: "10px",
    marginTop: "15px",
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
  },
  divider: {
    width: "100%",
    height: "2px",
    backgroundColor: "red",
    marginBottom: 5,
  },
  pTitleContainer: {
    pAlign: "right",
    margin: "15px",
    textAlign: "justify",
    textJustify: "inter-word",
  },
  tableHeaderCell: {
    backgroundColor: "rgba(255, 229, 153, 0.5)",
    fontSize: 12,
    border: "1px solid #000",
    padding: "4px",
    textAlign: "center",
    fontWeight: "bold",
  },
  footer: {
    pageBreakAfter: "always",
    position: "fixed",
    left: 0,
    bottom: 0,
    width: "100%",
  },
};

const ProvinceSendLetterFactorReport = forwardRef((props, ref) => {
  const { sDate } = props;
  const { date } = props;
  const { fnumber } = props;
  const { receiver } = props;
  const { item } = props;
  const { itemOutProvince } = props;
  const systemName = useSystemName();
  const ceoName = useCeoName();

  return (
    <div ref={ref}>
      <div style={styles.page}>
        <div style={styles.contentContainer}>
          <div style={styles.contentInLine}>
            <img alt="logo" src={logo} style={styles.logo} />
            <span style={styles.mainTitle}>
              اتحادیه سراسری تعاونی‌های کشاورزی پرورش دهندگان مرغ گوشتی ایران
            </span>
            <span style={styles.title}>
              اتحادیه شرکت های تعاونی کشاورزی مرغداران {" ‌"} {systemName}
            </span>
          </div>

          <div>
            <span style={styles.firsttitle}>بسمه تعالی</span>
          </div>

          <div style={styles.options}>
            <span style={styles.title}>شماره: {fnumber}</span>
            <span style={styles.titleTopic}>تاریخ: {formatJustDate(date)}</span>
            <span style={styles.titleTopic}>پیوست: -</span>
          </div>
        </div>

        <hr style={styles.divider} />

        <p style={styles.pTitleContainer}>
          <strong style={{ fontSize: "20px" }}>
            {receiver}
            <br />
            با سلام
            <br />
          </strong>
          احتراماً گزارش تخصیص مورخ {formatJustDate(sDate)}، مرغ گوشتی استان جهت
          استحضار بحضورتان ارسال میگردد.
        </p>

        <div style={styles.container}>
          <table style={styles.invoiceTable}>
            <thead style={styles.tableHeader}>
              <tr style={styles.headerRow}>
                <th style={styles.tableHeaderCell}>ردیف</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}>تلفن</th>
                <th style={styles.tableHeaderCell}>تعداد</th>
                <th style={styles.tableHeaderCell}>میانگین وزن</th>
                <th style={styles.tableHeaderCell}>جمع کل</th>
              </tr>
            </thead>
            <tbody>
              {item?.map((item, i) =>
                item?.provinceKillRequest?.map((pkRequest, pkIndex) => (
                  <tr
                    key={`${i}-${pkIndex}`}
                    style={i % 2 === 0 ? styles.tableRowEven : {}}
                  >
                    {pkIndex === 0 && (
                      <>
                        <td
                          style={styles.tableCell}
                          rowSpan={item?.provinceKillRequest?.length}
                        >
                          {i + 1}
                        </td>
                        <td
                          style={styles.tableCell}
                          rowSpan={item?.provinceKillRequest?.length}
                        >
                          {item?.name}
                        </td>
                        <td
                          style={styles.tableCell}
                          rowSpan={item?.provinceKillRequest?.length}
                        >
                          {item?.killHouseOperator?.user?.mobile}
                        </td>
                        <td
                          style={styles.tableCell}
                          rowSpan={item?.provinceKillRequest?.length}
                        >
                          {item?.killHouseOperator?.user?.city?.cityName}
                        </td>
                      </>
                    )}
                    <td style={styles.tableCell}>{pkRequest?.poultry}</td>
                    <td style={styles.tableCell}>{pkRequest?.poultryMobile}</td>
                    <td style={styles.tableCell}>{pkRequest?.quantity}</td>
                    <td style={styles.tableCell}>{pkRequest?.IndexWeight}</td>
                    {pkIndex === 0 && (
                      <td
                        style={styles.tableCell}
                        rowSpan={item?.provinceKillRequest?.length}
                      >
                        {item?.totalQuantity}
                      </td>
                    )}
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>

        {/* <div style={styles.footer}>
          <div style={styles.divider} />
          <p style={{ fontSize: 12, padding: "10px", marginRight: "10px" }}>
            {getAddressContent(systemName)}
          </p>
        </div> */}
      </div>
      <div style={styles.page}>
        <div style={styles.contentContainer}>
          <div style={styles.contentInLine}>
            <img alt="logo" src={logo} style={styles.logo} />
            <span style={styles.mainTitle}>
              اتحادیه سراسری تعاونی‌های کشاورزی پرورش دهندگان مرغ گوشتی ایران
            </span>
            <span style={styles.title}>
              اتحادیه شرکت های تعاونی کشاورزی مرغداران {" ‌"} {systemName}
            </span>
          </div>

          <div>
            <span style={styles.firsttitle}>بسمه تعالی</span>
          </div>

          <div style={styles.options}>
            <span style={styles.title}>شماره: {fnumber}</span>
            <span style={styles.titleTopic}>تاریخ: {formatJustDate(date)}</span>
            <span style={styles.titleTopic}>پیوست: -</span>
          </div>
        </div>

        <hr style={styles.divider} />

        <p style={styles.pTitleContainer}>
          <strong style={{ fontSize: "20px" }}>
            گزارش فروش خارج از استان مورخ {formatJustDate(sDate)}
          </strong>
        </p>

        <div style={styles.container}>
          <table style={styles.invoiceTable}>
            <thead style={styles.tableHeader}>
              <tr style={styles.headerRow}>
                <th style={styles.tableHeaderCell}>ردیف</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}>میانگین وزن</th>
                <th style={styles.tableHeaderCell}>تعداد کل</th>
                <th style={styles.tableHeaderCell}>نوع</th>
              </tr>
            </thead>
            <tbody>
              {itemOutProvince?.map((item, i) => (
                <tr key={i} style={i % 2 === 0 ? styles.tableRowEven : {}}>
                  <td style={styles.tableCell}>{i + 1}</td>
                  <td style={styles.tableCell}>
                    {item?.poultry?.unitName} ({item?.poultry?.user?.mobile})
                  </td>
                  <td style={styles.tableCell}>
                    {item?.buyer?.firstName} {item?.buyer?.lastName}
                  </td>
                  <td style={styles.tableCell}>{item?.buyer?.mobile}</td>
                  <td style={styles.tableCell}>{item?.buyer?.city}</td>
                  <td style={styles.tableCell}>{item?.IndexWeight}</td>
                  <td style={styles.tableCell}>{item?.quantity}</td>
                  <td style={styles.tableCell}>
                    {item?.freezing ? "انجماد" : "معمولی"}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={styles.container}>
          <span style={{ color: "gray", fontSize: "12px" }}>
            این گزارش در تاریخ {formatJustDate(date)} و ساعت{" "}
            {formatJustTime(date)} صادر شده است.
          </span>
        </div>

        <div style={{ flexDirection: "row", marginTop: "20px" }}>
          <div style={styles.signature}>
            <div style={styles.contentInLine}>
              <span style={styles.title}>{ceoName}</span>
              <span style={styles.title}>
                مدیرعامل اتحادیه مرغداران{" ‌"}
                {systemName}
              </span>
            </div>
          </div>
          <div style={styles.watermarkContainer}>
            <p style={styles.watermarkp}>سامانه رصدیار </p>
          </div>
        </div>

        {/* <div style={styles.footer}>
          <div style={styles.divider} />
          <p style={{ fontSize: 12, padding: "10px", marginRight: "10px" }}>
            {getAddressContent(systemName)}
          </p>
        </div> */}
      </div>
    </div>
  );
});

ProvinceSendLetterFactorReport.displayName = "ProvinceSendLetterFactorReport";

export default ProvinceSendLetterFactorReport;

ProvinceSendLetterFactorReport.propTypes = {
  item: PropTypes.any,
};
