import React, { forwardRef } from "react";
import { PropTypes } from "prop-types";
import { useSystemName } from "../../../../utils/getSystemName";
import logo from "../../../../assets/images/logo.png";
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",
    marginBottom: "2px",
  },
  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: {
    backgroundColor: "rgba(211, 211, 211, 0.3)",
    pageBreakAfter: "auto",
  },
  headerRow: {
    backgroundColor: "rgba(211, 211, 211, 0.3)",
    color: "black",
    pageBreakInside: "avoid",
    pageBreakAfter: "auto",
  },
  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: {
    marginLeft: "50px",
    padding: "10px",
    marginTop: "15px",
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
  },
  divider: {
    width: "100%",
    height: "2px",
    backgroundColor: "red",
    marginBottom: 15,
  },
  pTitleContainer: {
    pAlign: "center",
    margin: "15px",
    textAlign: "justify",
    textJustify: "inter-word",
  },
  tableHeaderCell: {
    backgroundColor: "rgba(211, 211, 211, 0.3)",
    fontSize: 10,
    border: "1px solid #000",
    padding: "4px",
    textAlign: "center",
    fontWeight: "bold",
  },
  footer: {
    pageBreakAfter: "always",
    position: "fixed",
    left: 0,
    bottom: 0,
    width: "100%",
  },
};

const SlaughterNewFactorFile = forwardRef((props, ref) => {
  const { item } = props;
  //   const { date } = props;
  const systemName = useSystemName();
  const ceoName = useCeoName();

  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}>شماره:</span>
          <span style={styles.titleTopic}>تاریخ:</span>
        </div>
      </div>

      <hr style={styles.divider} />

      <strong style={{ fontSize: "20px", textAlign: "center" }}>
        فاکتور فروش
      </strong>
      <br />

      <div style={styles.container}>
        <table
          style={{
            ...styles.invoiceTable,
            marginBottom: "5px",
          }}
        >
          <tbody>
            <tr>
              <td
                style={{
                  ...styles.tableCell,
                  width: "3%",
                  backgroundColor: "grey",
                }}
              >
                <span
                  style={{
                    writingMode: "vertical-lr",
                    textOrientation: "mixed",
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "white",
                  }}
                >
                  خریدار{" "}
                </span>
              </td>
              <td
                style={{
                  ...styles.tableCell,
                  width: "90%",
                  textAlign: "right",
                }}
              >
                {" ‌"}
                {" ‌"}
                {
                  item?.provinceCheckInfo?.killHouseAssignment?.killHouseRequest
                    ?.killhouseUser?.killHouseOperator?.user?.fullname
                }
              </td>
            </tr>
          </tbody>
        </table>

        <table
          style={{
            ...styles.invoiceTable,
            marginBottom: "5px",
          }}
        >
          <tbody>
            <tr>
              <td
                style={{
                  ...styles.tableCell,
                  width: "3%",
                  backgroundColor: "grey",
                }}
              >
                <span
                  style={{
                    writingMode: "vertical-lr",
                    textOrientation: "mixed",
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "white",
                  }}
                >
                  فروشنده{" "}
                </span>
              </td>
              <td
                style={{
                  ...styles.tableCell,
                  width: "90%",
                  textAlign: "right",
                }}
              >
                {" ‌"}
                {" ‌"}
                اتحادیه شرکت های تعاونی کشاورزی مرغداران {" ‌"} {systemName}
              </td>
            </tr>
          </tbody>
        </table>

        <table style={styles.invoiceTable}>
          <tr>
            <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>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td style={styles.tableCell}>1</td>
                  <td style={styles.tableCell}>
                    بار شماره
                    {
                      item?.provinceCheckInfo?.killHouseAssignment
                        ?.killHouseRequest?.barCode
                    }
                    مرغداری :{" "}
                    {`${item?.poultryRequest?.poultryName} (${item?.poultryRequest?.poultryUserMobile})`}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.provinceFactorToKillHouse.netWeight?.toLocaleString()}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.factorFee?.toLocaleString() + " ﷼"}
                  </td>
                  <td style={styles.tableCell}>
                    {item?.provinceFactorToKillHouse?.totalFactorAmount?.toLocaleString() +
                      " ﷼"}
                  </td>
                </tr>
              </tbody>
            </table>
          </tr>

          <tr>
            <table style={styles.invoiceTable}>
              <thead style={styles.tableHeader}>
                <tr style={styles.headerRow}>
                  <th colSpan={4} style={styles.tableHeaderCell}>
                    جمع فاکتور
                  </th>
                  <th style={styles.tableHeaderCell}>
                    {item?.provinceFactorToKillHouse?.totalFactorAmount?.toLocaleString() +
                      " ﷼"}
                  </th>
                </tr>
              </thead>
              <tbody style={styles.tableCell}>
                <tr>
                  <td colSpan={3}></td>
                  <td style={styles.tableCell}>تخفیف</td>
                  <td style={styles.tableCell}>0</td>
                </tr>
                <tr>
                  <td colSpan={3}></td>
                  <td style={styles.tableCell}>مالیات</td>
                  <td style={styles.tableCell}>0</td>
                </tr>
                <tr>
                  <td colSpan={3}></td>
                  <td style={styles.tableCell}>عوارض</td>
                  <td style={styles.tableCell}>0</td>
                </tr>
                <tr>
                  <td style={styles.tableCell} colSpan={3}>
                    مبلغ قابل پرداخت (ریال)
                  </td>
                  <td colSpan={2} style={styles.tableCell}>
                    {item?.provinceFactorToKillHouse?.totalFactorAmount?.toLocaleString() +
                      " ﷼"}
                  </td>
                </tr>
              </tbody>
            </table>
          </tr>
        </table>

        <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>
        <div style={styles.watermarkContainer}>
          <p style={styles.watermarkp}>سامانه رصدیار </p>
        </div>

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

SlaughterNewFactorFile.displayName = "SlaughterNewFactorFile";

export default SlaughterNewFactorFile;

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