import {Box, TextField} from '@mui/material'
import {Create} from '@refinedev/mui'
import {useForm} from '@refinedev/react-hook-form'

export const StationCreate = () => {
  const {
    saveButtonProps,
    refineCore: {formLoading},
    register,
    formState: {errors},
  } = useForm({
    refineCoreProps: {
      resource: 'station/',
    },
  })

  return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
        <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"
        />
        <TextField
          {...register('description', {
            required: 'Это поле является обязательным',
          })}
          error={!!(errors as any)?.description}
          helperText={(errors as any)?.description?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{shrink: true}}
          type="text"
          label={'Описание *'}
          name="description"
        />
        <TextField
          {...register('latitude', {
            required: 'Это поле является обязательным',
            valueAsNumber: true,
          })}
          error={!!(errors as any)?.latitude}
          helperText={(errors as any)?.latitude?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{shrink: true}}
          type="number"
          label={'Широта *'}
          name="latitude"
        />
        <TextField
          {...register('longitude', {
            required: 'Это поле является обязательным',
            valueAsNumber: true,
          })}
          error={!!(errors as any)?.longitude}
          helperText={(errors as any)?.longitude?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{shrink: true}}
          type="number"
          label={'Долгота *'}
          name="longitude"
        />
      </Box>
    </Create>
  )
}