import React, { forwardRef } from "react";
import { PropTypes } from "prop-types";
import logo from "../../../../assets/images/logo.png";
import { formatJustDate, formatJustTime } from "../../../../utils/formatTime";

const styles = {
  page: {
    width: "214mm",
    height: "302mm",
    display: "flex",
    margin: "0 auto",
    justifyContent: "center", // Center horizontally
    alignItems: "center", // Center vertically
    position: "relative",
    direction: "rtl",
    fontFamily: "titr",
    fontWeight: "bold",
  },
  pageData: {
    display: "flex",
    flexDirection: "column",
    padding: "20px",
    border: "2px solid #666", // Border color
    borderRadius: "10px",
    width: "50%",
    position: "relative",
    backgroundColor: "#fff", // Background color
    boxShadow: "0px 0px 20px rgba(0, 0, 0, 0.1)", // Box shadow
  },
  title: {
    textAlign: "center",
    marginBottom: "10px",
    fontSize: "24px",
    fontWeight: "bold",
    color: "#333", // Text color
  },
  logo: {
    width: "100px",
    height: "auto",
    margin: "0 auto", // Center horizontally
    display: "block",
  },
  hr: {
    border: "none",
    borderTop: "1px solid #ccc", // Line color
    margin: "5px 0", // Adjust margin as needed
  },
  row: {
    display: "flex",
    flexDirection: "row",
    marginBottom: "10px",
    justifyContent: "space-between",
  },
  label: {
    flex: "0 0 40%",
    textAlign: "right",
    marginRight: "10px",
    fontWeight: "bold",
    color: "#555", // Text color
  },
  value: {
    textAlign: "right",
    color: "#333", // Text color
    fontFamily: "titr",
  },
};

const SuccessTransactionRecipt = forwardRef(({ item, isPayment }, ref) => {
  return (
    <div ref={ref}>
      <div style={styles.page}>
        {item && (
          <div style={styles.pageData}>
            <img src={logo} alt="Logo" style={styles.logo} />
            <h1 style={styles.title}>رسید پرداخت</h1>
            <hr style={styles.hr} />
            <div style={styles.row}>
              <div style={styles.label}>تاریخ و زمان:</div>
              <div style={styles.value}>
                {`${formatJustDate(item.date)} ساعت ${formatJustTime(
                  item.date
                )}`}
              </div>
            </div>
            <hr style={styles.hr} />
            <div style={styles.row}>
              <div style={styles.label}>پرداخت کننده:</div>
              <div style={styles.value}>
                {isPayment ? item?.payerInfo?.fullname : item.payer}
              </div>
            </div>
            {!isPayment && (
              <>
                <hr style={styles.hr} />
                <div style={styles.row}>
                  <div style={styles.label}>تعداد سفارشات:</div>
                  <div style={styles.value}>
                    {item.information?.totalRequestNumber}
                  </div>
                </div>
                <hr style={styles.hr} />
                <div style={styles.row}>
                  <div style={styles.label}>تعداد کل (قطعه):</div>
                  <div style={styles.value}>
                    {item.information?.totalQuantity}
                  </div>
                </div>
                <hr style={styles.hr} />
                <div style={styles.row}>
                  <div style={styles.label}>وزن کل (کیلوگرم):</div>
                  <div style={styles.value}>
                    {item.information?.totalWeight}
                  </div>
                </div>
              </>
            )}

            <hr style={styles.hr} />
            <div style={styles.row}>
              <div style={styles.label}>شماره درخواست:</div>
              <div style={styles.value}>{item.orderId}</div>
            </div>
            <hr style={styles.hr} />
            <div style={styles.row}>
              <div style={styles.label}>شماره پیگیری:</div>
              <div style={styles.value}>{item.refId}</div>
            </div>
            <hr style={styles.hr} />
            <div style={styles.row}>
              <div style={styles.label}>کدسفارش:</div>
              <div style={styles.value}>{item.orderId}</div>
            </div>
            <hr style={styles.hr} />
            <div style={styles.row}>
              <div style={styles.label}>شماره کارت:</div>
              <div style={styles.value}>{item.cardHolderPan}</div>
            </div>
            <hr style={styles.hr} />
            <div style={styles.row}>
              <div style={styles.label}>مبلغ:</div>
              <div style={styles.value}>
                {item.amount?.toLocaleString()} ریال
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
});

SuccessTransactionRecipt.displayName = "SuccessTransactionRecipt";

export default SuccessTransactionRecipt;

SuccessTransactionRecipt.propTypes = {
  item: PropTypes.object,
};
