import { Autocomplete, Box, FormControl, FormLabel, InputAdornment, MenuItem, Select, Stack, TextField, ToggleButton, ToggleButtonGroup } from "@mui/material";
import { Create, NumberField, useAutocomplete } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { Controller } from "react-hook-form";
import { IMonitoring } from "./monitorings.types";
import { Group } from "@mui/icons-material";
import { MonitoringStatusEditChip } from "./status/monitoringstatusedit";
import { MonitoringStatusChip } from "./status/monitoringstatuschip";


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

  // const { autocompleteProps: categoryAutocompleteProps } = useAutocomplete({
  //   resource: "categories",
  // });

  return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <Box
        component="form"
        sx={{ display: "flex", flexDirection: "column" }}
        gap={2}
        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"
        />
        <Stack direction="row" spacing={2} alignItems="center" justifyContent="space-between">
          <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>
            }}          
          />
        </Stack>
        <FormControl>
            <Controller
              control={control}
              name="status"
              defaultValue="off"
              render={({ field }) => (
                <ToggleButtonGroup
                  id="Status"
                  {...field}
                  exclusive
                  color="primary"
                  onChange={(_, newValue) => {
                    setValue("status", newValue, {
                      shouldValidate: true,
                    });

                    return newValue;
                  }}
                >
                  <ToggleButton value={"started"}>
                    {"Started"}
                  </ToggleButton>
                  <ToggleButton value={"stopped"}>
                    {"Stopped"}
                  </ToggleButton>
                  <ToggleButton value={"off"}>
                    {"Deactivated"}
                  </ToggleButton>                    
                </ToggleButtonGroup>
              )}
            />
          </FormControl>          
        <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>
    </Create>
  );
};

//----------- new

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


//---------------


// <Controller
// name="status"
// control={control}
// rules={{ required: true }}
// render={({ field }) => <MonitoringStatusChip value={field.value} />}
// />          



// <Controller
// name="status"
// control={control}
// render={({ field }) => {
//   return (
//     <Select
//       {...field}
//       value={field?.value || "stopped"}
//       label={"Status"}
//     >
//       <MenuItem value="started">Draft</MenuItem>
//       <MenuItem value="stoppedd">Published</MenuItem>
//     </Select>
//   );
// }}
// />




// <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
//       />
//     )}
//   />
// )}
// />