import { useContext } from 'react'
import { WizardContext, ACTIONS } from '../context/wizardStore'
import Required from './required'

import Form from 'react-bootstrap/Form'
import Col from 'react-bootstrap/Col'

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

  const { name, email, street, zip, city } = state.formData

  return (
    <>
      <Form.Group>
        <Form.Label>
          Name <Required />
        </Form.Label>
        <Form.Control
          type="text"
          name="name"
          placeholder="Name"
          value={name}
          onChange={onChangeEvent}
          required
        />
      </Form.Group>
      <Form.Group>
        <Form.Label>
          E-Mail <Required />
        </Form.Label>
        <Form.Control
          type="email"
          name="email"
          placeholder="E-Mail"
          value={email}
          onChange={onChangeEvent}
          required
        />
      </Form.Group>
      <Form.Group>
        <Form.Label>
          Straße <Required />
        </Form.Label>
        <Form.Control
          type="text"
          name="street"
          placeholder="Straße"
          value={street}
          onChange={onChangeEvent}
          required
        />
      </Form.Group>
      <Form.Row>
        <Form.Group as={Col} xs={4}>
          <Form.Label>
            PLZ <Required />
          </Form.Label>
          <Form.Control
            type="text"
            name="zip"
            placeholder="PLZ"
            value={zip}
            onChange={onChangeEvent}
            required
          />
        </Form.Group>
        <Form.Group as={Col}>
          <Form.Label>
            Stadt <Required />
          </Form.Label>
          <Form.Control
            type="text"
            name="city"
            placeholder="Stadt"
            value={city}
            onChange={onChangeEvent}
            required
          />
        </Form.Group>
      </Form.Row>
    </>
  )
}