import {Box, TextField, FormControlLabel, Checkbox, Typography} from '@mui/material'
import {Edit} from '@refinedev/mui'
import {useForm} from '@refinedev/react-hook-form'
import {Controller} from 'react-hook-form'

export const RouteEdit = () => {
  const {
    saveButtonProps,
    register,
    control,
    formState: {errors},
  } = useForm({})

  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
        <TextField
          {...register('carrier_id', {
            required: 'Это поле является обязательным',
            valueAsNumber: true,
          })}
          error={!!(errors as any)?.carrier_id}
          helperText={(errors as any)?.carrier_id?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{shrink: true}}
          type="number"
          label={'ID перевозчика'}
          name="carrier_id"
        />
        <TextField
          {...register('route_number', {
            required: 'Это поле является обязательным',
            setValueAs: (value) => String(value),
          })}
          error={!!(errors as any)?.route_number}
          helperText={(errors as any)?.route_number?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{shrink: true}}
          type="text"
          label={'Номер маршрута'}
          name="route_number"
        />
        <Controller
          name="route_direction" // boolean
          control={control}
          defaultValue={false}
          render={({field}: {field: any}) => <FormControlLabel label="Прямой маршрут?" control={<Checkbox {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />} />}
        />

        <Typography variant="caption" color="textSecondary" sx={{mt: 0, mb: 1}}>
          (Прямой / Обратный)
        </Typography>

        <TextField
          {...register('path', {
            required: 'Это поле является обязательным',
            setValueAs: (value) => String(value),
          })}
          error={!!(errors as any)?.path}
          helperText={(errors as any)?.path?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{shrink: true}}
          type="text"
          label={'Путь'}
          name="path"
        />
      </Box>
    </Edit>
  )
}