import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Grid } from "../../../../components/grid/Grid";
import { SimpleTable } from "../../../../components/simple-table/SimpleTable";
import { SPACING } from "../../../../data/spacing";
import { provinceFinancialGetFinancialHistory } from "../../services/province-financial-get-financial-history";
import { PropTypes } from "prop-types";

export default function ProvinceFinancialFinancialHistory({ profileid }) {
  const [dataTable, setTableData] = useState();
  const { financialHistory } = useSelector(
    (state) => state.provinceFinancialSlice
  );

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(provinceFinancialGetFinancialHistory(profileid));
  }, []);

  useEffect(() => {
    const d = financialHistory?.map((item, i) => {
      return [
        i + 1,
        item.totalCreditor - item.totalDebtors < 0 ? "بدهی" : "طلبکار",
        item.nationalId,
        item.totalCreditor,
        item.totalDebtors,
        item.cost,
        item.paymentCode,
        item.image.length
          ? item.image.map((item, i) => {
              return [
                <Grid display="flex" key={`SlaughterPaymentFactorImage${i}`}>
                  <a href={item} alt="دانلود">
                    <img
                      src={item}
                      width="80"
                      height="80"
                      alt="دانلود"
                      style={{
                        borderRadius: "5px",
                      }}
                    />
                  </a>
                </Grid>,
              ];
            })
          : "بدون پیوست",
        item.description,
        // <Button
        //   key="test"
        //   variant="outlined"
        //   onClick={() => {
        //     dispatch(
        //       DRAWER({
        //         right: !(window.innerWidth <= 600),
        //         bottom: window.innerWidth <= 600,
        //         content: <FinancialDocumentNumber />,
        //         title: "شماره سند مالی",
        //       })
        //     );
        //   }}
        // >
        //   122344
        // </Button>,
      ];
    });
    setTableData(d);
  }, [financialHistory]);
  return (
    <Grid
      xs={12}
      container
      justifyContent="space-between"
      gap={SPACING.SMALL}
      mt={SPACING.SMALL}
      mb={SPACING.SMALL}
    >
      <SimpleTable
        name="سابقه اسناد مالی"
        columns={[
          "ردیف",
          "نوع سند",
          "کدملی",
          "بستانکار",
          "بدهکار",
          "قابل واریز",
          "شناسه پرداخت",
          "سند پرداخت",
          "توضیحات",
          // "شماره سند مالی",
        ]}
        data={dataTable}
      />
    </Grid>
  );
}

ProvinceFinancialFinancialHistory.propTypes = {
  profileid: PropTypes.string,
};
