import type {
  EditNachhilfeangebotById,
  UpdateNachhilfeangebotInput,
} from 'types/graphql'

import type { RWGqlError } from '@redwoodjs/forms'
import {
  Form,
  FormError,
  FieldError,
  Label,
  TextField,
  Submit,
} from '@redwoodjs/forms'

type FormNachhilfeangebot = NonNullable<
  EditNachhilfeangebotById['nachhilfeangebot']
>

interface NachhilfeangebotFormProps {
  nachhilfeangebot?: EditNachhilfeangebotById['nachhilfeangebot']
  onSave: (
    data: UpdateNachhilfeangebotInput,
    id?: FormNachhilfeangebot['id']
  ) => void
  error: RWGqlError
  loading: boolean
}

const NachhilfeangebotForm = (props: NachhilfeangebotFormProps) => {
  const onSubmit = (data: FormNachhilfeangebot) => {
    props.onSave(data, props?.nachhilfeangebot?.id)
  }

  return (
    <div className="rw-form-wrapper">
      <Form<FormNachhilfeangebot> onSubmit={onSubmit} error={props.error}>
        <FormError
          error={props.error}
          wrapperClassName="rw-form-error-wrapper"
          titleClassName="rw-form-error-title"
          listClassName="rw-form-error-list"
        />

        <Label
          name="subject"
          className="rw-label"
          errorClassName="rw-label rw-label-error"
        >
          Subject
        </Label>

        <TextField
          name="subject"
          defaultValue={props.nachhilfeangebot?.subject}
          className="rw-input"
          errorClassName="rw-input rw-input-error"
          validation={{ required: true }}
        />

        <FieldError name="subject" className="rw-field-error" />

        <Label
          name="currentClass"
          className="rw-label"
          errorClassName="rw-label rw-label-error"
        >
          Current class
        </Label>

        <TextField
          name="currentClass"
          defaultValue={props.nachhilfeangebot?.currentClass}
          className="rw-input"
          errorClassName="rw-input rw-input-error"
          validation={{ required: true }}
        />

        <FieldError name="currentClass" className="rw-field-error" />

        <Label
          name="cost"
          className="rw-label"
          errorClassName="rw-label rw-label-error"
        >
          Cost
        </Label>

        <TextField
          name="cost"
          defaultValue={props.nachhilfeangebot?.cost}
          className="rw-input"
          errorClassName="rw-input rw-input-error"
          validation={{ valueAsNumber: true, required: true }}
        />

        <FieldError name="cost" className="rw-field-error" />

        <div className="rw-button-group">
          <Submit disabled={props.loading} className="rw-button rw-button-blue">
            Save
          </Submit>
        </div>
      </Form>
    </div>
  )
}

export default NachhilfeangebotForm
