// form
import { useFormContext, Controller } from 'react-hook-form';
import * as React from 'react';

// @mui
import { IconButton, TextField, TextFieldProps } from '@mui/material';
import { DesktopDatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';

import InputAdornment from '@mui/material/InputAdornment';
import EventIcon from '@mui/icons-material/Event';
import { fPostFormat } from '../../utils/formatTime';

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

interface IProps {
  name: string;
}

export default function RHFDatepicker({ name, ...other }: IProps & TextFieldProps) {
  const { control } = useFormContext();

  return (
    <Controller
      name={name}
      control={control}
      render={({ field, fieldState: { error } }) => (
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          {/* <MobileDatePicker
            inputFormat="yyyy-MM-dd"
            value={field.value}
            onChange={(value) => {
              field.onChange(fPostFormat(value));
            }}
            renderInput={(field) => (
              <TextField
                {...field}
                fullWidth
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      <EventIcon />
                    </InputAdornment>
                  ),
                }}
                error={!!error}
                helperText={error?.message}
                {...other}
              />
            )}
          /> */}
          {/* <DesktopDatePicker
            value={field.value}
            inputFormat="dd/MM/yyyy"
            onChange={(value) => {
              field.onChange(value)
            }}
            renderInput={(params) => <TextField {...params} fullWidth />}
          /> */}

          <DesktopDatePicker
            value={field.value}
            inputFormat="dd/MM/yyyy"
            onChange={(value) => {
              field.onChange(value);
            }}
            renderInput={(params) => (
              <TextField
                {...params}
                fullWidth
                error={!!error}
                helperText={error?.message}
                {...other}
              />
            )}
          />
        </LocalizationProvider>
      )}
    />
  );
}