import { Button, Grid } from "@mui/material";
import { useCallback } from "react";
import { Controller, useWatch } from "react-hook-form";

const CallActionSubcategoriesButton = ({ sub_category, control, onSubmit }) => {
  const category_id = useWatch({ control, name: "category_id" });

  const handleClick = useCallback(
    (onChange) => {
      onChange(sub_category.subcategory_id);
      setTimeout(() => {
        onSubmit();
      }, 0);
    },
    [sub_category.subcategory_id],
  );

  return (
    <Controller
      control={control}
      render={({ field, fieldState: { error } }) => {
        return sub_category.category_id === category_id ? (
          <Button
            sx={{ py: 1.5 }}
            fullWidth
            variant="outlined"
            color={"primary"}
            onClick={() => handleClick(field.onChange)}
          >
            {sub_category.subcategory_name}
          </Button>
        ) : null;
      }}
      name={"subcategory_id"}
    />
  );
};
export default CallActionSubcategoriesButton;
