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

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

  return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
        <TextField
          {...register('heading', {
            required: 'This field is required',
          })}
          error={!!(errors as any)?.heading}
          helperText={(errors as any)?.heading?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{shrink: true}}
          type="text"
          label={'Heading'}
          name="heading"
        />
        <TextField
          {...register('body', {
            required: 'This field is required',
          })}
          error={!!(errors as any)?.body}
          helperText={(errors as any)?.body?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{shrink: true}}
          type="text"
          label={'Body'}
          name="body"
        />
      </Box>
    </Create>
  )
}
