import { Button, Card } from "@mui/material";
import React from "react";
import { useDispatch } from "react-redux";
import { AdvancedTable } from "../../../../components/advanced-table/AdvancedTable";
import { Grid } from "../../../../components/grid/Grid";
import { columnsName } from "../../../../data/columnsName";
import { SPACING } from "../../../../data/spacing";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { AvicultureNewRequest } from "../../../aviculture/components/aviculture-new-request/AvicultureNewRequest";

export const CityNewRequest = () => {
  const dispatch = useDispatch();
  return (
    <Grid container gap={SPACING.MEDIUM} direction="column" xs={12}>
      <Grid
        container
        gap={SPACING.SMALL}
        justifyContent={{ xs: "center", lg: "space-between" }}
        alignSelf="center"
        alignItems="center"
        xs={12}
        direction={{ xs: "column", lg: "row" }}
      >
        <Grid
          container
          xs={12}
          gap={SPACING.SMALL}
          alignItems={"start"}
          direction={"column"}
        >
          <Grid container width="100%" justifyContent="space-between">
            <Button
              className="avicultureNewRequestBtn"
              variant={"contained"}
              onClick={() => {
                dispatch(
                  DRAWER({
                    right: !(window.innerWidth <= 600),
                    bottom: window.innerWidth <= 600,
                    title: "اطلاعات جوجه ریزی",
                    content: <AvicultureNewRequest />,
                  })
                );
              }}
            >
              ثبت درخواست کشتار جدید
            </Button>
          </Grid>
          <Grid width="100%" className="avicultureActiveRequestsView">
            <Card>
              <AdvancedTable
                name={"درخواست های فعال کشتار"}
                columns={columnsName}
                data={[["sjsjsj"]]}
              />
            </Card>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};
