import React, { useState} from 'react'
// import GlobalContext from '../App'
import PropTypes from 'prop-types'
import styles from './register-user.module.scss'
import Input from '../components/Input'
import Button from '../components/Button'
import { isAddressInfo } from './validation'

const AddressInfo = ({ step, setStep, user, setUser }) => {
  // const  {state, dispatch } = useContext(GlobalContext);
  const [errors, setErrors] = useState({})
  

  const handleAddress = ({ target }) => {
    setUser({
      type: 'UPDATE_ADDRESS_INFO',
      payload: { 
        [target.name]: target.value },
    })
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    const errors = isAddressInfo(user)
    setErrors(errors)
    if (Object.keys(errors).length > 0) return

    

    setStep(step + 1)
  }

  return (
    <form onSubmit={handleSubmit} className={styles.RegisterForm}>
      <Input
        type="text"
        label="Country"
        name="country"
        value={user.addressInfo.country}
        onChange={(e) => handleAddress(e)}
        error={errors.country}
      />
      <Input
        type="text"
        label="City"
        name="city"
        value={user.addressInfo.city}
        onChange={(e) => handleAddress(e)}
        error={errors.city}
      />
      <Input
        type="text"
        label="Street"
        name="street"
        value={user.addressInfo.street}
        onChange={(e) => handleAddress(e)}
        error={errors.street}
      />
      <Input
        type="text"
        label="House"
        name="house"
        value={user.addressInfo.house}
        onChange={(e) => handleAddress(e)}
        error={errors.house}
      />
      <div className={styles.submit}>
        <Button onClick={() => setStep(step - 1)} type="button">
          Back
        </Button>
        <Button type="submit"> Submit</Button>
      </div>
    </form>
  )
}
AddressInfo.propTypes = {
  step: PropTypes.number,
  setStep: PropTypes.func,
  user: PropTypes.object,
 
}
export default AddressInfo;