import { Box, TextField } from "@mui/material";
import { Edit } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { languageStore, META_LANGUAGE } from "@stores";
import { LanguageSelector } from "@ui";
import { observer } from "mobx-react-lite";

export const CountryEdit = observer(() => {
  const { language } = languageStore;
  const {
    saveButtonProps,
    register,
    formState: { errors },
  } = useForm({
    refineCoreProps: META_LANGUAGE(language)
  });

  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Box
        component="form"
        sx={{ display: "flex", flexDirection: "column" }}
        autoComplete="off"
      >
        <LanguageSelector />
        <TextField
          {...register("code", {
            required: "Это поле является обязательным",
          })}
          error={!!(errors as any)?.code}
          helperText={(errors as any)?.code?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="text"
          label={"Код *"}
          disabled
          name="code"
        />
        <TextField
          {...register("name", {
            required: "Это поле является обязательным",
          })}
          error={!!(errors as any)?.name}
          helperText={(errors as any)?.name?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="text"
          label={"Название *"}
          name="name"
        />
      </Box>
    </Edit>
  );
});