import { Autocomplete, Box, InputAdornment, Select, TextField } from "@mui/material";
import MenuItem from "@mui/material/MenuItem";
import { Edit, useAutocomplete } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import { IMonitoring } from "./monitorings.types";



export const MonitoringEdit = () => {
  const {
    saveButtonProps,
    refineCore: { queryResult, formLoading },
    register,
    control,
    formState: { errors },
  } = useForm<IMonitoring>({});

  const blogPostsData = queryResult?.data?.data;

  // const { autocompleteProps: categoryAutocompleteProps } = useAutocomplete({
  //   resource: "categories",
  //   defaultValue: blogPostsData?.category?.id,
  // });

  return (
    <Edit dataProviderName="monitorings" isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <Box
        component="form"
        sx={{ display: "flex", flexDirection: "column" }}
        autoComplete="off"
      >
        <TextField
          {...register("name", {
            required: "The name is required",
          })}
          error={!!(errors as any)?.name}
          helperText={(errors as any)?.name?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="text"
          label={"Name"}
          name="name"
        />
        <TextField
          {...register("samplerate", {
            required: "The samplerate is required",
          })}
          error={!!(errors as any)?.samplerate}
          helperText={(errors as any)?.samplerate?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="number"
          label={"Samplerate"}
          name="samplerate"
          InputProps={{
            endAdornment: 
            <InputAdornment position="end">hz</InputAdornment>
          }}          
        />
        <TextField
          {...register("sampleperiod", {
            required: "The sampleperiod is required",
          })}
          error={!!(errors as any)?.sampleperiod}
          helperText={(errors as any)?.sampleperiod?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="number"          
          label={"Sampleperiod"}
          name="sampleperiod"
          InputProps={{
            endAdornment: 
            <InputAdornment position="end">s</InputAdornment>
          }}          
        />
        <TextField
          {...register("downtime", {
            required: "The downtime is required",
          })}
          error={!!(errors as any)?.downtime}
          helperText={(errors as any)?.downtime?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="number"          
          label={"Downtime"}
          name="downtime"
          InputProps={{
            endAdornment: 
            <InputAdornment position="end">s</InputAdornment>
          }}          
        />
        <TextField
          {...register("owner", {
            required: "The downtime is required",
          })}
          error={!!(errors as any)?.downtime}
          helperText={(errors as any)?.downtime?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          multiline
          label={"Owner"}
          name="owner"
        />
      </Box>
    </Edit>
  );
};

/*
{ <Controller
control={control}
name={"category.id"}
rules={{ required: "This field is required" }}
// eslint-disable-next-line
defaultValue={null as any}
render={({ field }) => (
  <Autocomplete
    {...categoryAutocompleteProps}
    {...field}
    onChange={(_, value) => {
      field.onChange(value.id);
    }}
    getOptionLabel={(item) => {
      return (
        categoryAutocompleteProps?.options?.find((p) => {
          const itemId =
            typeof item === "object"
              ? item?.id?.toString()
              : item?.toString();
          const pId = p?.id?.toString();
          return itemId === pId;
        })?.title ?? ""
      );
    }}
    isOptionEqualToValue={(option, value) => {
      const optionId = option?.id?.toString();
      const valueId =
        typeof value === "object"
          ? value?.id?.toString()
          : value?.toString();
      return value === undefined || optionId === valueId;
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        label={"Category"}
        margin="normal"
        variant="outlined"
        error={!!(errors as any)?.category?.id}
        helperText={(errors as any)?.category?.id?.message}
        required
      />
    )}
  />
)}
/> }
*/