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 ContentCutIcon from "@mui/icons-material/ContentCut";
import { useCeoAddress } from "../../../../utils/getCeoAddress";

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: {
    backgroundColor: "rgba(255, 229, 153, 0.5)",
    pageBreakAfter: "auto",
  },
  headerRow: {
    backgroundColor: "rgba(255, 229, 153, 0.6)",
    color: "black",
    pageBreakInside: "avoid",
    pageBreakAfter: "auto",
  },
  logo: {
    width: "60px",
    height: "auto",
    marginBottom: "10px",
  },
  contentContainer: {
    display: "flex",
    justifyContent: "space-between",
    marginTop: "20px",
    marginLeft: "20px",
    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: "20px",
    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,
  },
  divider2: {
    width: "100%",
    height: "1px",
    background: `repeating-linear-gradient(90deg, transparent, transparent 5px, #f00 5px, #f00 10px)`,
  },
  pTitleContainer: {
    margin: "15px",
    textAlign: "justify",
    textJustify: "inter-word",
    fontSize: "20px",
  },
  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%",
  },
  centerText: {
    fontSize: "20px",
    alignSelf: "center",
    textAlign: "center",
  },
  cutIcon: {
    zIndex: 2,
    transform: "rotate(180deg)",
    opacity: "60%",
  },
};

const SlaughterSendKillerInvoice = forwardRef((props, ref) => {
  const { date } = props;
  const { amount } = props;
  const { breeder } = props;
  const { buyer } = props;
  const systemName = useSystemName();
  const ceoAdress = useCeoAddress();

  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>
          <span style={styles.title}>ثبت : 5203 تاسیس : 1383</span>
        </div>

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

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

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

      <hr style={styles.divider} />

      <p style={styles.centerText}>
        <strong>تاییدیه خریدار</strong>
      </p>

      <p style={styles.pTitleContainer}>
        این حواله در تاریخ {" ‌"} {formatJustDate(date)} جهت بارگیري تعداد{" "}
        {amount.toLocaleString()} قطعه مرغ زنده تحویل مرغداري {breeder} گردید.
        <br />
        <br />
        <br />
      </p>

      <span style={styles.centerText}>
        <span style={styles.centerText}>
          <strong>امضا خریدار آقا/خانم {buyer}</strong>
        </span>
      </span>
      <br />
      <br />

      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          justifyItems: "center",
          marginBottom: 15,
        }}
      >
        <ContentCutIcon style={styles.cutIcon} />
        <div style={styles.divider2} />
      </div>

      <p style={styles.pTitleContainer}>
        مطابق برگ باسکول پیوستی، خروج تعداد {amount.toLocaleString()} قطعه به
        وزن ......................... کیلوگرم در تاریخ {" ‌"}
        {formatJustDate(date)} از مرغداري آقا/خانم
        {" ‌"}
        {breeder}
        {" ‌"} مورد تایید اینجانب می باشد.
        <br />
        <br />
        <br />
      </p>

      <span style={styles.centerText}>
        <strong>امضا خریدار آقا/خانم {buyer}</strong>
      </span>
      <br />

      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          justifyItems: "center",
          marginBottom: 15,
        }}
      >
        <ContentCutIcon style={styles.cutIcon} />
        <div style={styles.divider2} />
      </div>

      <p style={styles.centerText}>
        <strong>تاییدیه مرغداری</strong>
      </p>

      <p style={styles.pTitleContainer}>
        مطابق برگ باسکول پیوستی، خروج تعداد {amount.toLocaleString()} قطعه به
        وزن ......................... کیلوگرم توسط آقا/خانم {" ‌"}
        {buyer}
        {" ‌"} مورد تائید اینجانب {" ‌"}
        {breeder}
        {" ‌"} مالک / نماینده قانونی مرغداری {" ‌"}
        {breeder}
        {" ‌"} باشد.
      </p>
      <br />

      <span style={styles.centerText}>
        <strong>
          مهر و امضا {breeder}{" "}
          {
            " ‌  ‌  ‌  ‌  ‌  ‌  ‌  ‌ ‌  ‌  ‌  ‌  ‌   ‌  ‌  ‌  ‌ ‌  ‌  ‌  ‌  ‌   ‌  ‌  ‌  ‌ ‌  ‌  ‌  ‌  ‌  ‌  ‌  ‌  ‌   ‌"
          }{" "}
          اثر انگشت
        </strong>
      </span>
      <br />

      <div style={styles.footer}>
        <div style={styles.divider} />
        <p style={{ fontSize: 13, padding: "10px", marginRight: "10px" }}>
          {ceoAdress}
        </p>
      </div>
    </div>
  );
});

SlaughterSendKillerInvoice.displayName = "SlaughterSendKillerInvoice";

export default SlaughterSendKillerInvoice;

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