import { Button, Typography } from "@mui/material";
import React, { useEffect } from "react";
import { Grid } from "../../../../components/grid/Grid";
import DownloadIcon from "@mui/icons-material/Download";
import { SPACING } from "../../../../data/spacing";
import { PropTypes } from "prop-types";
import { useDispatch, useSelector } from "react-redux";
import { provinceFinancialGetTransactionInfo } from "../../services/province-financial-get-transaction-info";
import {
  LOADING_END,
  LOADING_START,
} from "../../../../lib/redux/slices/appSlice";

export const ProvinceFinancialDebtorInfo = ({ paymentCode }) => {
  const dispatch = useDispatch();
  const { transactionInfo } = useSelector(
    (state) => state.provinceFinancialSlice
  );

  useEffect(() => {
    dispatch(LOADING_START());
    dispatch(provinceFinancialGetTransactionInfo(paymentCode)).then(() => {
      dispatch(LOADING_END());
    });
  }, []);

  return (
    <Grid
      className="slaughter-new-request-form"
      container
      gap={SPACING.SMALL}
      direction="column"
      flex="1"
      justifyContent="space-between"
    >
      <Typography variant="body2" color="primary">
        مبلغ بدهی: {transactionInfo?.cost.toLocaleString()}
      </Typography>
      <Typography variant="body2" color="primary">
        شناسه پرداخت: {paymentCode}
      </Typography>

      <Typography variant="body2" color="primary">
        توضیحات:
        {transactionInfo?.description ? transactionInfo?.description : "ندارد"}
      </Typography>
      {transactionInfo?.image?.length ? (
        <Grid container gap={SPACING.SMALL}>
          <Typography variant="body2">پیوست سند:</Typography>
          {transactionInfo?.image?.map((item, i) => {
            return [
              <a key={i} href={item}>
                <img alt="سند بدهکاری" style={{ width: "100%" }} src={item} />
              </a>,
              <Button
                style={{ width: "100%" }}
                key={i}
                startIcon={<DownloadIcon />}
                target="_blank"
                variant="outlined"
                href={item}
              >
                دانلود سند
              </Button>,
            ];
          })}
        </Grid>
      ) : (
        <Typography variant="body2" color="secondary">
          سند ثبت نشده است
        </Typography>
      )}
    </Grid>
  );
};

ProvinceFinancialDebtorInfo.propTypes = {
  paymentCode: PropTypes.any,
};
