import { Box, Button } from "@mui/material";
import React from "react";
import { useDispatch } from "react-redux";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
import { DRAWER } from "../lib/redux/slices/appSlice";
import AttachMoneyIcon from "@mui/icons-material/AttachMoney";
import { SimpleTable } from "../components/simple-table/SimpleTable";
import { ProvinceFinancialRegisterDebt } from "../features/province-finacial/components/province-financial-register-debt/ProvinceFinancialRegisterDebt";

const ProvinceFinancialDebts = () => {
  const dispatch = useDispatch();
  return (
    <>
      <Box display={"flex"} justifyContent="center">
        <Grid
          container
          direction="column"
          justifyContent="center"
          xs={12}
          sm={12}
          md={10}
          lg={10}
        >
          <Grid justifyContent="center" my={SPACING.MEDIUM}>
            <Grid
              container
              xs={12}
              alignItems={"start"}
              gap={SPACING.SMALL}
              direction={"column"}
            >
              <Button
                startIcon={<AttachMoneyIcon />}
                className="first-step"
                variant={"contained"}
                onClick={() => {
                  dispatch(
                    DRAWER({
                      title: "ثبت اطلاعات جوجه ریزی",
                      right: !(window.innerWidth <= 600),
                      bottom: window.innerWidth <= 600,
                      content: <ProvinceFinancialRegisterDebt />,
                    })
                  );
                }}
              >
                ثبت بدهی جدید
              </Button>
            </Grid>
            <Grid container justifyContent="space-between" gap={SPACING.SMALL}>
              <Grid width="100%" mt={SPACING.MEDIUM}>
                <SimpleTable
                  columns={["نام مرغدار", "مبلغ", "توضیحات", "سند"]}
                  data={[["ssss"]]}
                />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Box>
    </>
  );
};

export default ProvinceFinancialDebts;
