import { useRef } from "react";
import { formatJustDate } from "../../../../utils/formatTime";

const styles = {
  tableInNewPage: {
    pageBreakAfter: "always",
    paddingLeft: "40px",
    paddingRight: "40px",
    direction: "rtl",
    fontFamily: "titr",
    fontWeight: "bold",
  },
  container: {
    width: "95%",
    alignSelf: "center",
    pageBreakInside: "avoid",
  },

  invoiceTable: {
    width: "100%",
    borderCollapse: "collapse",
    alignSelf: "center",
    fontFamily: "titr",
    marginBottom: "15px",
  },
  tableCell: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 12,
    fontWeight: "bolder",
  },
  tableCellGreen: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 12,
    color: "white",
    fontWeight: "bolder",
    backgroundColor: "rgba(26, 188, 156, 0.7)",
  },
  tableCellMobile: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 12,
  },
  tableInnerCell: {
    border: "1px solid #000",
    pAlign: "left",
    textAlign: "center",
    fontSize: 9,
    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",
  },

  tableHeaderCell: {
    backgroundColor: "rgba(211, 211, 211, 0.3)",
    fontSize: 12,
    border: "1px solid #000",
    padding: "4px",
    textAlign: "center",
    fontWeight: "bolder",
  },
  tableHeaderCellGreen: {
    backgroundColor: "rgba(26, 188, 156, 0.7)",
    fontSize: 12,
    border: "1px solid #000",
    padding: "4px",
    textAlign: "center",
    fontWeight: "bolder",
    color: "white",
  },
  footer: {
    left: 0,
    bottom: 0,
    width: "100%",
    position: "absolute",
  },
  footerContainer: {
    alignItems: "center",
    display: "flex",
  },

  tableRowEven: {
    backgroundColor: "rgba(170, 183, 255, 0.3)",
  },
  titleOfTable: {
    marginRight: "20px",
    fontSize: "15px",
  },
};

export const GetClearanceCode = ({ clearanceCode }) => {
  const formRef = useRef(null);

  const handleCodeClick = () => {
    if (formRef.current) {
      formRef.current.submit();
    }
  };

  return (
    <form
      action="https://e.ivo.ir/Rahgiri/Gidprnt.aspx"
      method="post"
      target="_blank"
      ref={formRef}
      style={{
        cursor: "pointer",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <input name="gid" type="hidden" value={clearanceCode} />

      <a color="primary" onClick={handleCodeClick}>
        {clearanceCode}
      </a>
    </form>
  );
};
export const TablePage1Web = ({ item }) => {
  return (
    <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.tableHeaderCellGreen}>مانده قطعه قابل تخصیص</th>
          <th style={styles.tableHeaderCellGreen}>وزن قابل تخصیص</th>
          <th style={styles.tableHeaderCell}>اپراتور</th>
        </tr>
      </thead>
      <tbody>
        <tr style={styles.tableRowEven}>
          <td style={styles.tableCell}>
            {item?.totalRequests.toLocaleString()}
          </td>
          <td style={styles.tableCell}>
            {item?.poultryRequestTotalQuantity.toLocaleString()}
          </td>
          <td style={styles.tableCell}>
            {Math.round(item?.poultryRequestTotalWeight).toLocaleString()}
          </td>
          <td style={styles.tableCell}>
            {item?.provinceKillRequestsTotalQuantity.toLocaleString()}
          </td>
          <td style={styles.tableCell}>
            {item?.provinceKillRequestsTotalWeight.toLocaleString()}
          </td>
          <td style={styles.tableCellGreen}>
            {item?.poultryRequestTotalRemainQuantity.toLocaleString()}
          </td>
          <td style={styles.tableCellGreen}>
            {Math.round(item?.poultryRequestRemainWeight).toLocaleString()}
          </td>
          <td style={styles.tableCell}>
            {item?.operatorFullname} <br /> {item?.operatorMobile}
          </td>
        </tr>
      </tbody>
    </table>
  );
};

export const TablePage1Part2Web = ({ items, start, end }) => {
  const slicedItems = items?.slice(start - 1, end);
  return (
    <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.tableHeaderCellGreen}>مانده قطعه قابل تخصیص</th>
          <th style={styles.tableHeaderCellGreen}>مانده وزن قابل تخصیص</th>
          <th style={styles.tableHeaderCell}>اپراتور</th>
        </tr>
      </thead>
      <tbody>
        {slicedItems?.map((item, i) => (
          <tr key={i} style={i % 2 === 0 ? styles.tableRowEven : {}}>
            <td style={styles.tableCell}>{i + start}</td>
            <td style={styles.tableCell}>
              {item?.killhouseUser?.name} <br /> (
              {item?.killhouseUser?.killHouseOperator?.user.mobile})
            </td>
            <td style={styles.tableCell}>
              {item?.totalInfo?.provinceKillRequestQuantity.toLocaleString()}
            </td>
            <td style={styles.tableCell}>
              {item?.totalInfo?.provinceKillRequestWeight.toLocaleString()}
            </td>
            <td style={styles.tableCell}>
              {item?.totalInfo?.killHouseRequestsCount.toLocaleString()}
            </td>
            <td style={styles.tableCell}>
              {item?.totalInfo?.killHouseRequestQuantity.toLocaleString()}
            </td>
            <td style={styles.tableCell}>
              {item?.totalInfo?.killHouseRequestWeight.toLocaleString()}
            </td>
            <td style={styles.tableCellGreen}>
              {item?.totalInfo?.provinceKillRequestRemainQuantity.toLocaleString()}
            </td>
            <td style={styles.tableCellGreen}>
              {item?.totalInfo?.provinceKillRequestRemainWeight.toLocaleString()}
            </td>
            <td style={styles.tableCell}>
              {
                <>
                  {item?.totalInfo?.operatorFullname}
                  <br />
                  {item?.totalInfo?.operatorMobile}
                </>
              }
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export const TablePage2Web = ({ items, start, end }) => {
  const slicedItems = items?.slice(start - 1, end);
  return (
    <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>
          <th style={styles.tableHeaderCell}>محل کشتار</th>
          <th style={styles.tableHeaderCell}>دامپزشک</th>
        </tr>
      </thead>
      <tbody>
        {slicedItems?.map((item, i) => (
          <tr key={i} style={i % 2 === 0 ? styles.tableRowEven : {}}>
            <td style={styles.tableCell}>{i + start}</td>
            <td style={styles.tableCell}>{item?.barCode}</td>
            <td style={styles.tableCell}>
              {item?.killhouseUser?.name} <br /> (
              {item?.killhouseUser?.killHouseOperator?.user.mobile})
            </td>
            <td style={styles.tableCell}>
              {formatJustDate(item?.killRequest?.reciveDate)}
            </td>
            <td style={styles.tableCell}>
              {item?.poultryRequest?.poultry?.unitName} <br />(
              {item?.poultryRequest?.poultry?.user?.mobile})
            </td>
            <td style={styles.tableCell}>{item?.car?.typeCar}</td>
            <td style={styles.tableCell}>{item?.car?.driverName}</td>
            <td style={styles.tableCell}>
              {item?.poultryRequest?.chickenBreed}
            </td>
            <td style={styles.tableCell}>{item?.quantity?.toLocaleString()}</td>
            <td style={styles.tableCell}>
              {item?.weightInfo?.weight?.toLocaleString()}
            </td>
            <td style={styles.tableCell}>{item?.weightInfo?.indexWeight}</td>
            <td style={styles.tableCell}>{item?.killPlace}</td>
            <td style={styles.tableCell}>
              {item?.vetFarm ? (
                <>
                  {item?.vetFarm?.vet?.user?.fullname}
                  <br />
                  {item?.vetFarm?.vet?.user?.mobile}
                </>
              ) : (
                "ندارد"
              )}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export const TablePage3Web = ({ items, start, end }) => {
  const slicedItems = items?.slice(start - 1, end);
  return (
    <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>
          <th style={styles.tableHeaderCell}>کد قرنطینه</th>
          {/* <th style={styles.tableHeaderCell}>تعداد تخلیه شده (دامپزشک)</th>
          <th style={styles.tableHeaderCell}>وزن تخلیه شده (دامپزشک)</th> */}
          <th style={styles.tableHeaderCell}>دامپزشک</th>
        </tr>
      </thead>
      <tbody>
        {slicedItems?.map((item, i) => (
          <tr key={i} style={i % 2 === 0 ? styles.tableRowEven : {}}>
            <td style={styles.tableCell}>{i + start}</td>
            <td style={styles.tableCell}>{item?.barCode}</td>
            <td style={styles.tableCell}>
              {item?.killhouseUser?.name} <br /> (
              {item?.killhouseUser?.killHouseOperator?.user.mobile})
            </td>
            <td style={styles.tableCell}>
              {item?.poultryRequest?.poultry?.unitName} <br />(
              {item?.poultryRequest?.poultry?.user?.mobile})
            </td>
            <td style={styles.tableCell}>
              {formatJustDate(item?.killRequest?.reciveDate)}
            </td>
            <td style={styles.tableCell}>{item?.car?.typeCar}</td>
            <td style={styles.tableCell}>{item?.car?.driverName}</td>
            <td style={styles.tableCell}>
              {item?.poultryRequest?.chickenBreed}
            </td>
            <td style={styles.tableCell}>{item?.quantity?.toLocaleString()}</td>
            <td style={styles.tableCell}>
              {item?.weightInfo?.weight?.toLocaleString()}
            </td>
            <td style={styles.tableCell}>{item?.weightInfo?.indexWeight}</td>
            <td style={styles.tableCell}>
              <GetClearanceCode clearanceCode={item?.clearanceCode} />
            </td>
            {/* <td style={styles.tableCell}>{item?.vetAcceptedRealQuantity}</td>
            <td style={styles.tableCell}>{item?.vetAcceptedRealWeight}</td> */}
            <td style={styles.tableCell}>
              {item?.vetFarm ? (
                <>
                  {item?.vetFarm?.vet?.user?.fullname}
                  <br />
                  {item?.vetFarm?.vet?.user?.mobile}
                </>
              ) : (
                "ندارد"
              )}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export const TablePage4Web = ({ items, start, end }) => {
  const slicedItems = items?.slice(start - 1, end);
  return (
    <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>
          <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>
        {slicedItems?.map((item, i) => (
          <tr key={i} style={i % 2 === 0 ? styles.tableRowEven : {}}>
            <td style={styles.tableCell}>{i + start}</td>
            <td style={styles.tableCell}>{item?.barCode}</td>
            <td style={styles.tableCell}>
              {item?.killhouseUser?.name} <br /> (
              {item?.killhouseUser?.killHouseOperator?.user.mobile})
            </td>
            <td style={styles.tableCell}>
              {item?.poultryRequest?.poultry?.unitName} <br />(
              {item?.poultryRequest?.poultry?.user?.mobile})
            </td>
            <td style={styles.tableCell}>
              {formatJustDate(item?.killRequest?.reciveDate)}
            </td>
            <td style={styles.tableCell}>{item?.car?.typeCar}</td>
            <td style={styles.tableCell}>{item?.car?.driverName}</td>
            <td style={styles.tableCell}>
              {item?.poultryRequest?.chickenBreed}
            </td>
            <td style={styles.tableCell}>{item?.quantity?.toLocaleString()}</td>
            <td style={styles.tableCell}>
              {item?.weightInfo?.weight?.toLocaleString()}
            </td>
            <td style={styles.tableCell}>{item?.weightInfo?.indexWeight}</td>
            <td style={styles.tableCell}>
              <GetClearanceCode clearanceCode={item?.clearanceCode} />
            </td>
            <td style={styles.tableCell}>
              {item?.vetAcceptedRealQuantity.toLocaleString()}
            </td>
            <td style={styles.tableCell}>
              {item?.vetAcceptedRealWeight.toLocaleString()}
            </td>
            {/* <td style={styles.tableCell}>ثبت نشده</td>
            <td style={styles.tableCell}>ثبت نشده</td> */}
            <td style={styles.tableCell}>
              {item?.vetFarm ? (
                <>
                  {item?.vetFarm?.vet?.user?.fullname}
                  <br />
                  {item?.vetFarm?.vet?.user?.mobile}
                </>
              ) : (
                "ندارد"
              )}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export const TablePage5Web = ({ items, start, end }) => {
  const slicedItems = items?.slice(start - 1, end);
  return (
    <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>
          <th style={styles.tableHeaderCell}>وزن تخلیه شده (دامپزشک)</th>
          <th style={styles.tableHeaderCell}>اطلاعات بار کشتارگاه (تعداد)</th>
          <th style={styles.tableHeaderCell}>اطلاعات بار کشتارگاه (وزن)</th>
        </tr>
      </thead>
      <tbody>
        {slicedItems?.map((item, i) => (
          <tr key={i} style={i % 2 === 0 ? styles.tableRowEven : {}}>
            <td style={styles.tableCell}>{i + start}</td>
            <td style={styles.tableCell}>{item?.barCode}</td>
            <td style={styles.tableCell}>
              {item?.killhouseUser?.name} <br /> (
              {item?.killhouseUser?.killHouseOperator?.user.mobile})
            </td>
            <td style={styles.tableCell}>
              {formatJustDate(item?.killRequest?.reciveDate)}
            </td>
            {/* <td style={styles.tableCell}>
              {item?.poultryRequest?.poultry?.unitName} <br />(
              {item?.poultryRequest?.poultry?.user?.mobile})
            </td> */}
            <td style={styles.tableCell}>{item?.car?.typeCar}</td>
            <td style={styles.tableCell}>{item?.car?.driverName}</td>
            <td style={styles.tableCell}>
              <GetClearanceCode clearanceCode={item?.clearanceCode} />
            </td>
            <td style={styles.tableCell}>
              {item?.weightInfo?.quantity.toLocaleString()}
            </td>
            <td style={styles.tableCell}>
              {item?.weightInfo?.weight.toLocaleString()}
            </td>
            <td style={styles.tableCell}>
              {item?.weightInfo?.killHouseVetQuantity.toLocaleString()}
            </td>
            <td style={styles.tableCell}>
              {item?.weightInfo?.killHouseVetWeight.toLocaleString()}
            </td>
            <td style={styles.tableCell}>
              {item?.weightInfo?.assingmentQuantity.toLocaleString()}
            </td>
            <td style={styles.tableCell}>
              {item?.weightInfo?.assingmentWeight.toLocaleString()}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};
