import * as React from 'react'
import { useContext } from 'react'
import { WizardContext } from './context/wizardStore'
import Required from './required'

export default function Contact() {
  const { state, onChangeEvent } = useContext(WizardContext)

  const { formDataChanged } = state
  const { purpose, destination, org } = state.formData

  return (
    <>
      <div className="fsw">
        <div className="fs">
          <label className="flabel">
            Zweck der Fahrt <Required />
          </label>
          <input
            type="text"
            name="purpose"
            value={purpose}
            onChange={onChangeEvent}
            required
            className={`input-text ${
              formDataChanged.includes('purpose') && 'input-changed'
            }`}
          />
        </div>
      </div>
      <div className="fsw">
        <div className="fs">
          <label className="flabel">
            Ziel der Fahrt <Required />
          </label>
          <input
            type="text"
            name="destination"
            value={destination}
            onChange={onChangeEvent}
            required
            className="input-text"
          />
        </div>
      </div>
      <div className="fsw">
        <div className="fs">
          <label className="flabel">Verein</label>
          <input
            type="text"
            name="org"
            value={org}
            onChange={onChangeEvent}
            className="input-text"
          />
        </div>
      </div>
    </>
  )
}