"use client";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import { CreateGroupInputs } from "@/app/api/group/actions";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useCallback } from "react";

const GroupInfo: React.FC = () => {
  const { t } = useTranslation();
  const {
    register,
    formState: { errors, defaultValues },
    control,
    reset,
    resetField,
    setValue,
  } = useFormContext<CreateGroupInputs>();

  
  const resetGroup = useCallback(() => {
    console.log(defaultValues);
    if (defaultValues !== undefined) {
      resetField("description");
    }
  }, [defaultValues]);


  return (
    <Card sx={{ display: "block" }}>
      <CardContent component={Stack} spacing={4}>
        <Box>
          <Typography variant="overline" display="block" marginBlockEnd={1}>
            {t("Group Info")}
          </Typography>
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
            <Grid item xs={6}>
              <TextField
                label={t("Group Name")}
                fullWidth
                {...register("name", {
                  required: true,
                })}
                error={Boolean(errors.name)}
                helperText={
                  Boolean(errors.name) &&
                  (errors.name?.message
                    ? t(errors.name.message)
                    : t("Please input correct name"))
                }
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                label={t("Group Description")}
                fullWidth
                multiline
                rows={4}
                {...register("description")}
                error={Boolean(errors.description)}
                helperText={
                  Boolean(errors.description) &&
                  (errors.description?.message
                    ? t(errors.description.message)
                    : t("Please input correct description"))
                }
              />
            </Grid>
          </Grid>
        </Box>
      </CardContent>
    </Card>
  );
};

export default GroupInfo;