import React, { forwardRef } from "react";
import { PropTypes } from "prop-types";
import logo from "../../../../assets/images/logo.png";
import { formatJustDate } from "../../../../utils/formatTime";
import moment from "moment";
import logoFooter from "../../../../assets/images/reportFooter.png";
import {
  TablePage1,
  TablePage1Part2,
  TablePage2,
  TablePage3,
  TablePage4,
  TablePage5,
} from "./Pages";

const styles = {
  page: {
    width: "210mm",
    height: "297mm",
    display: "flex",
    margin: "0 auto",
    flexDirection: "column",
    position: "relative",
    direction: "rtl",
    fontFamily: "titr",
    fontWeight: "bold",
  },
  pageData: {
    position: "relative",
    display: "flex",
    direction: "rtl",
    flexDirection: "column",
  },
  tableInNewPage: {
    pageBreakAfter: "always",
    paddingLeft: "20px",
    paddingRight: "20px",
    direction: "rtl",
    fontFamily: "titr",
    fontWeight: "bold",
  },
  container: {
    width: "95%",
    alignSelf: "center",
    pageBreakInside: "avoid",
  },
  p: {
    fontFamily: "titr",
    fontWeight: "bold",
    pAlign: "justify",
  },
  span: {
    fontFamily: "titr",
    fontWeight: "bold",
    pAlign: "justify",
  },

  logo: {
    marginTop: "15px",
    width: "100px",
    height: "auto",
    zIndex: 10,
  },
  logoFooter: {
    width: "100px",
    height: "auto",
  },
  contentContainer: {
    alignItems: "center",
    display: "flex",
    justifyContent: "space-between",
    marginRight: "20px",
    marginLeft: "20px",
  },
  contentInLine: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
  },
  mainTitle: {
    fontFamily: "titr",
    fontSize: 11,
    pAlign: "center",
    fontWeight: "bolder",
  },
  signature: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-end",
    marginLeft: "20px",
  },
  watermarkContainer: {
    position: "fixed",
    top: 250,
    left: 30,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
    opacity: 0.15,
    zIndex: -1,
    userSelect: "none",
  },
  watermarkp: {
    fontFamily: "nazanin",
    fontSize: 100,
    fontWeight: "bolder",
    color: "grey",
    transform: "rotate(-45deg)",
    left: "50%",
    userSelect: "none",
  },
  title: {
    fontSize: 12,
    fontWeight: "bolder",
    pAlign: "center",
  },
  titleTopic: {
    fontSize: 12,
    fontWeight: "bolder",
    pAlign: "center",
  },
  firsttitle: {
    pAlign: "center",
    color: "#00008b",
    fontWeight: "800",
  },
  title2: {
    fontSize: 10,
    marginBottom: 10,
    pAlign: "center",
  },
  options: {
    marginLeft: "50px",
    padding: "10px",
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
  },
  divider: {
    alignSelf: "center",
    width: "120mm",
    height: "1px",
    backgroundColor: "black",
    margin: "0em",
  },
  divider2: {
    alignSelf: "center",
    width: "100%",
    height: "1px",
    backgroundColor: "black",
    margin: "0em",
  },
  pTitleContainer: {
    pAlign: "center",
    margin: "15px",
    textAlign: "justify",
    textJustify: "inter-word",
    fontFamily: "nazanin",
    fontSize: "20px",
    fontWeight: "bolder",
  },
  tableHeaderCell: {
    backgroundColor: "rgba(211, 211, 211, 0.3)",
    fontSize: 10,
    border: "1px solid #000",
    padding: "4px",
    textAlign: "center",
    fontWeight: "bold",
  },
  footer: {
    left: 0,
    bottom: 0,
    width: "100%",
    position: "absolute",
  },
  footerContainer: {
    alignItems: "center",
    display: "flex",
  },
  circle: {
    borderRadius: "50%",
    width: "20px",
    height: "20px",
    padding: "10px",
    background: "#ecf0f1",
    border: " 1px solid #000",
    color: "#000",
    textAlign: "center",
    marginRight: "300px",
  },
  tableRowEven: {
    backgroundColor: "rgba(170, 183, 255, 0.3)",
  },
  titleOfTable: {
    marginRight: "20px",
    fontSize: "15px",
  },
  titleOfTable2: {
    fontSize: "15px",
  },
};

const ProvinceGetContradictionsFile = forwardRef((props, ref) => {
  const { item } = props;
  const { inDate1 } = props;
  const { inDate2 } = props;

  const HeaderPDF = () => {
    return (
      <>
        <div style={styles.contentContainer}>
          <div style={styles.contentInLine}></div>
          <div style={{ ...styles.contentInLine, marginRight: "100px" }}>
            <span
              style={{
                ...styles.firsttitle,
                fontSize: 14,
                zIndex: 1,
              }}
            >
              گزارش مغایرت اطلاعات کشتار و عدم فعالیت نقش ها{" "}
            </span>
            {inDate1 === inDate2 ? (
              <span style={{ fontSize: "15px", color: "#485460" }}>
                مورخ {formatJustDate(moment(inDate1))}
              </span>
            ) : (
              <span style={{ fontSize: "15px", color: "#485460" }}>
                از تاریخ {formatJustDate(moment(inDate1))} {"‌ ‌‌ "} تا تاریخ{" "}
                {"‌ "}
                {formatJustDate(moment(inDate2))}
              </span>
            )}
            <hr style={styles.divider} />
            سامانه رصدیار
          </div>

          <div style={styles.contentInLine}>
            <img alt="logo" src={logo} style={styles.logo} />
          </div>
        </div>
      </>
    );
  };

  let pageNumber = 0;
  const FooterPDF = () => {
    pageNumber++;
    return (
      <>
        <div style={styles.footer}>
          <div style={styles.divider2} />
          <div style={styles.footerContainer}>
            <img alt="logo" src={logoFooter} style={styles.logoFooter} />

            <p style={{ fontSize: 15, marginRight: "10px" }}>
              گزارش مغایرت درخواست کشتار و عدم فعالیت نقش ها
              <br />
              www.rasadyaar.ir
            </p>
            <div style={styles.circle}>{pageNumber}</div>
          </div>
        </div>
      </>
    );
  };

  const step = 15;

  const iterationsPage1Part2 = Math.ceil(
    Math.max(0, (item?.partFour.length - step) / step)
  );

  const generatedComponentsPage1Part2 = [];

  for (let i = 0; i < iterationsPage1Part2; i++) {
    const start = step + i * step + 1;
    const end = step + (i + 1) * step;

    if (item?.partTwo.length > end - step) {
      generatedComponentsPage1Part2.push(
        <div style={styles.page} key={i}>
          <HeaderPDF />
          <div style={styles.tableInNewPage}>
            <h3 style={styles.titleOfTable2}>
              مغایرت در ثبت ماشین و ایجاد بار
            </h3>
            <TablePage1Part2 items={item?.partTwo} start={start} end={end} />
          </div>
          <FooterPDF />
        </div>
      );
    }
  }

  const iterationsPage3 = Math.ceil(
    Math.max(0, (item?.partFour.length - step) / step)
  );
  const generatedComponentsPage3 = [];

  for (let i = 0; i < iterationsPage3; i++) {
    const start = step + i * step + 1;
    const end = step + (i + 1) * step;

    if (item?.partFour.length > end - step) {
      generatedComponentsPage3.push(
        <div style={styles.page} key={i}>
          <HeaderPDF />
          <div style={styles.tableInNewPage}>
            <h3 style={styles.titleOfTable2}>بارهای تخلیه نشده</h3>
            <TablePage3 items={item?.partFour} start={start} end={end} />
          </div>
          <FooterPDF />
        </div>
      );
    }
  }

  const iterationsPage4 = Math.ceil(
    Math.max(0, (item?.partFive.length - step) / step)
  );
  const generatedComponentsPage4 = [];

  for (let i = 0; i < iterationsPage4; i++) {
    const start = step + i * step + 1;
    const end = step + (i + 1) * step;

    if (item?.partFour.length > end - step) {
      generatedComponentsPage4.push(
        <div style={styles.page} key={i}>
          <HeaderPDF />
          <div style={styles.tableInNewPage}>
            <h3 style={styles.titleOfTable2}>
              بارهاي تکمیل نشده (بارگزاري سند باسکول و مستندات وزنی)
            </h3>
            <TablePage4 items={item?.partFive} start={start} end={end} />
          </div>
          <FooterPDF />
        </div>
      );
    }
  }

  const iterationsPage5 = Math.ceil(
    Math.max(0, (item?.partSix.length - step) / step)
  );
  const generatedComponentsPage5 = [];

  for (let i = 0; i < iterationsPage5; i++) {
    const start = step + i * step + 1;
    const end = step + (i + 1) * step;

    if (item?.partFour.length > end - step) {
      generatedComponentsPage5.push(
        <div style={styles.page} key={i}>
          <HeaderPDF />
          <div style={styles.tableInNewPage}>
            <h3 style={styles.titleOfTable2}>مغایرت در اطلاعات بار</h3>
            <TablePage5 items={item?.partSix} start={start} end={end} />
          </div>
          <FooterPDF />
        </div>
      );
    }
  }

  return (
    <div ref={ref}>
      <div style={styles.watermarkContainer}>
        <p style={styles.watermarkp}>سامانه رصدیار </p>
      </div>

      <div style={styles.page}>
        <HeaderPDF />
        <div style={styles.pageData}>
          <h3 style={styles.titleOfTable}> درخواست کشتار و تخصیص</h3>
          <div style={styles.container}>
            <TablePage1 item={item?.partOne} />
          </div>
          <h3 style={styles.titleOfTable}>مغایرت در ثبت ماشین و ایجاد بار</h3>

          <div style={styles.container}>
            <TablePage1Part2 items={item?.partTwo} start={1} end={step} />
          </div>
        </div>
        <FooterPDF />
      </div>

      {generatedComponentsPage1Part2}

      {/* Page 2  */}

      <div style={styles.page}>
        <HeaderPDF />
        <div style={styles.pageData}>
          <h3 style={styles.titleOfTable}>بارهای فاقد کد قرنطینه</h3>
          <div style={styles.container}>
            <TablePage2 items={item?.partThree} start={1} end={15} />
          </div>
        </div>
        <FooterPDF />
      </div>

      {item?.partThree.length > 15 && (
        <div style={styles.page}>
          <HeaderPDF />
          <div style={styles.tableInNewPage}>
            <h3 style={styles.titleOfTable2}>بارهای فاقد کد قرنطینه</h3>
            <TablePage2 items={item?.partThree} start={16} end={30} />
          </div>
          <FooterPDF />
        </div>
      )}

      {item?.partThree.length > 30 && (
        <div style={styles.page}>
          <HeaderPDF />
          <div style={styles.tableInNewPage}>
            <h3 style={styles.titleOfTable2}>بارهای فاقد کد قرنطینه</h3>
            <TablePage2 items={item?.partThree} start={31} end={45} />
          </div>
          <FooterPDF />
        </div>
      )}

      {item?.partThree.length > 45 && (
        <div style={styles.page}>
          <HeaderPDF />
          <div style={styles.tableInNewPage}>
            <h3 style={styles.titleOfTable2}>بارهای فاقد کد قرنطینه</h3>
            <TablePage2 items={item?.partThree} start={46} end={75} />
          </div>
          <FooterPDF />
        </div>
      )}

      {/* Page 3  */}

      <div style={styles.page}>
        <HeaderPDF />
        <div style={styles.pageData}>
          <h3 style={styles.titleOfTable}>بارهای تخلیه نشده</h3>

          <div style={styles.container}>
            <TablePage3 items={item?.partFour} start={1} end={step} />
          </div>
        </div>
        <FooterPDF />
      </div>

      {generatedComponentsPage3}

      {/* Page 4  */}

      <div style={styles.page}>
        <HeaderPDF />
        <div style={styles.pageData}>
          <h3 style={styles.titleOfTable}>
            بارهاي تکمیل نشده (بارگزاري سند باسکول و مستندات وزنی)
          </h3>

          <div style={styles.container}>
            <TablePage4 items={item?.partFive} start={1} end={step} />
          </div>
        </div>
        <FooterPDF />
      </div>

      {generatedComponentsPage4}

      {/* Page 5  */}

      <div style={styles.page}>
        <HeaderPDF />
        <div style={styles.pageData}>
          <h3 style={styles.titleOfTable}>مغایرت در اطلاعات بار</h3>

          <div style={styles.container}>
            <TablePage5 items={item?.partSix} start={1} end={step} />
          </div>
        </div>
        <FooterPDF />
      </div>
      {generatedComponentsPage5}
    </div>
  );
});

ProvinceGetContradictionsFile.displayName = "ProvinceGetContradictionsFile";

export default ProvinceGetContradictionsFile;

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