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

const styles = {
  page: {
    width: "210mm",
    margin: "0 auto",
    display: "flex",
    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: 11,
  },
  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: 15,
  },
  pTitleContainer: {
    pAlign: "right",
    margin: "15px",
    textAlign: "justify",
    textJustify: "inter-word",
  },
  tableHeaderCell: {
    backgroundColor: "rgba(255, 229, 153, 0.5)",
    fontSize: 10,
    border: "1px solid #000",
    padding: "4px",
    textAlign: "center",
    fontWeight: "bold",
  },
  footer: {
    pageBreakAfter: "always",
    position: "fixed",
    left: 0,
    bottom: 0,
    width: "100%",
  },
};

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

  const totalCapacity = item?.reduce(
    (total, currentItem) => total + (currentItem?.quantity || 0),
    0
  );

  function getItemInfoQuantity(item) {
    let totalQuantity = 0;
    item?.forEach((option) => {
      if (option?.provinceKillRequests) {
        option.provinceKillRequests.forEach((request) => {
          if (request.info?.quantity !== undefined) {
            totalQuantity += request.info.quantity;
          }
        });
      }
    });
    return totalQuantity;
  }

  function getItemInfoWeight(item) {
    let totalQuantity = 0;
    item?.forEach((option) => {
      if (option?.provinceKillRequests) {
        option.provinceKillRequests.forEach((request) => {
          if (request.info?.weight !== undefined) {
            totalQuantity += request.info.weight;
          }
        });
      }
    });
    return totalQuantity;
  }

  return (
    <div style={styles.page} ref={ref}>
      <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>
        <br />
        احتراماً گزارش تخصیص و کشتار مورخ {formatJustDate(sDate)}، مرغ گوشتی
        استان جهت استحضار بحضورتان ارسال میگردد.
      </p>

      <div style={styles.container}>
        <p style={{ marginTop: "40px" }}>
          اطلاعات تخصیص:{" "}
          <span style={{ color: "green", fontWeight: "boler" }}>
            {" "}
            تعداد درخواست کشتار (
            {totalCapacity !== undefined && totalCapacity.toLocaleString()}{" "}
            قطعه)، تخصیص داده شده ({getItemInfoQuantity(item).toLocaleString()}{" "}
            قطعه)، وزن کل تخصیص ({" "}
            {Math.round(getItemInfoWeight(item)).toLocaleString()} کیلوگرم).
          </span>
        </p>

        <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>
              <th style={styles.tableHeaderCell}>وزن تقریبی بار</th>
              <th style={styles.tableHeaderCell}>محل کشتار</th>
            </tr>
          </thead>
          <tbody>
            {item?.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?.user?.fullname}
                </td>
                <td style={styles.tableCellMobile}>
                  {item?.poultry?.user?.mobile}
                </td>
                <td style={styles.tableCell}>
                  {item?.poultry?.address?.city?.name}
                </td>
                <td style={styles.tableCell}>
                  {item?.quantity.toLocaleString()}
                </td>
                <td style={styles.tableCell}>
                  {item?.IndexWeight.toLocaleString()}
                </td>
                <td style={styles.tableCell}>{item?.hatching?.age}</td>
                <td style={styles.tableInnerCell}>
                  {item?.provinceKillRequests?.map((item, i, array) => (
                    <>
                      {item?.killhouseUser?.killHouseOperator?.user?.fullname
                        ? item?.killhouseUser?.killHouseOperator?.user?.fullname
                        : "............"}
                      <br />
                      {i < array.length - 1 && (
                        <div style={{ borderBottom: "1px solid #000" }} />
                      )}
                    </>
                  ))}
                </td>
                <td style={styles.tableInnerCell}>
                  {item?.provinceKillRequests?.map((item, i, array) => (
                    <>
                      {item?.info?.quantity
                        ? item?.info?.quantity.toLocaleString()
                        : "............"}
                      <br />
                      {i < array.length - 1 && (
                        <div style={{ borderBottom: "1px solid #000" }} />
                      )}
                    </>
                  ))}
                </td>
                <td style={styles.tableInnerCell}>
                  {item?.provinceKillRequests?.map((item, i, array) => (
                    <>
                      {Math.round(item?.info?.weight)
                        ? Math.round(item?.info?.weight).toLocaleString()
                        : "............"}
                      <br />
                      {i < array.length - 1 && (
                        <div style={{ borderBottom: "1px solid #000" }} />
                      )}
                    </>
                  ))}
                </td>
                <td style={styles.tableInnerCell}>
                  {item?.provinceKillRequests?.map((item, i, array) => (
                    <>
                      {item?.info?.killPlace
                        ? item?.info?.killPlace
                        : "............"}
                      <br />
                      {i < array.length - 1 && (
                        <div style={{ borderBottom: "1px solid #000" }} />
                      )}
                    </>
                  ))}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </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>
  );
});

ProvinceSendLetterFactor.displayName = "ProvinceSendLetterFactor";

export default ProvinceSendLetterFactor;

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