import { Button, Chip, Divider, Typography } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { useDispatch } from "react-redux";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { ChangeBankForm } from "../change-bank-form/ChangeBankForm";
import { SimpleTable } from "../../../../components/simple-table/SimpleTable";
import { SPACING } from "../../../../data/spacing";
import { PropTypes } from "prop-types";

export const ChangeCardInfo = ({ item }) => {
  const dispatch = useDispatch();
  return (
    <Grid container direction="column" gap={SPACING.SMALL}>
      <Grid textAlign="start">
        <Divider textAlign="left">
          <Chip
            label={
              <Grid display="flex" alignItems="center">
                <Typography variant="body2">اطلاعات بانکی</Typography>
                <Button
                  variant="text"
                  onClick={() => {
                    dispatch(
                      DRAWER({
                        right: !(window.innerWidth <= 600),
                        bottom: window.innerWidth <= 600,
                        title: "تغییر اطلاعات بانکی",
                        content: <ChangeBankForm item={item} />,
                      })
                    );
                  }}
                >
                  (ویرایش)
                </Button>
              </Grid>
            }
          />
        </Divider>
      </Grid>
      <Grid>
        <SimpleTable
          // name={`اطلاعات بانکی مرغداری ${item.unitName}`}
          columns={[
            "نام بانک",
            "نام صاحب حساب",
            "شماره کارت",
            "شماره حساب",
            "شماره شبا",
          ]}
          data={[
            [
              item?.userBankInfo?.bankName,
              item?.userBankInfo?.nameOfBankUser,
              item?.userBankInfo?.card,
              Number(item?.userBankInfo?.account),
              item?.userBankInfo?.shaba,
            ],
          ]}
        />
      </Grid>
    </Grid>
  );
};

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