{"size": 5884, "ext": "js", "max_stars_repo_path": "src/components/RequestAPickup/Form/Form.js", "max_stars_repo_name": "GetmevaDev/sdc", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/RequestAPickup/Form/Form.js", "max_issues_repo_name": "GetmevaDev/sdc", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/RequestAPickup/Form/Form.js", "max_forks_repo_name": "GetmevaDev/sdc", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 29.7171717172, "max_line_length": 158, "alphanum_fraction": 0.5834466349}
import React, { useEffect, useState } from "react"
import {graphql, useStaticQuery} from "gatsby"
import Arrow from "../../../images/Arrow 1.svg"
import Image1 from "../../../images/success.svg"
import Image2 from "../../../images/success2.svg"
import classes from "./form.module.scss"



export function Form (){

  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  const [phone, setPhone] = useState('');
  const [pickup, setPickup] = useState('');
  const [date, setDate] = useState('');

  const [nameDirty, setNameDirty] = useState(false);
  const [addressDirty, setAddressDirty] = useState(false);
  const [phoneDirty, setPhoneDirty] = useState(false);
  const [pickupDirty, setPickupDirty] = useState(false);
  const [dateDirty, setDateDirty] = useState(false);

  const [nameError, setNameError] = useState(true);
  const [addressError, setAddressError] = useState(true);
  const [phoneError, setPhoneError] = useState(true);
  const [pickupError, setPickupError] = useState(true);
  const [dateError, setDateError] = useState(true);

  const [formValid, setFormValid] = useState(false);
  const [handlerValid, setHandlerValid] = useState(false)


const blurHandler = (e) => {
  switch (e.target.name){
    case 'OfficeName':
      setNameDirty(true)
      break
    case 'Address':
      setAddressDirty(true)
      break
    case 'PhoneNumber':
      setPhoneDirty(true)
      break
    case 'PickupDetails':
      setPickupDirty(true)
      break
    case 'RequestedDate&Time':
      setDateDirty(true)
      break
  }
}

const nameHandler = (e) =>{
  setName(e.target.value);
    if (e.target.value.length !== 0){
      setNameError(false);
    }else{
      setNameError(true);
    }
}

  const addressHandler = (e) =>{
    setAddress(e.target.value);
    if (e.target.value.length !== 0){
      setAddressError(false);
    }else{
      setAddressError(true);
    }
  }


  const phoneHandler = (e) =>{
    setPhone(e.target.value);
    if (e.target.value.length !== 0){
      setPhoneError(false);
    }else{
      setPhoneError(true);
    }
  }

  const pickupHandler = (e) =>{
    setPickup(e.target.value);
    if (e.target.value.length !== 0){
      setPickupError(false);
    }else{
      setPickupError(true);
    }
  }

  const dateHandler = (e) =>{
    setDate(e.target.value);
    if (e.target.value.length !== 0){
      setDateError(false);
    }else{
      setDateError(true);
    }
  }


  const handlerValidation = () => {
      setHandlerValid(!handlerValid)
    console.log(handlerValid)
  }



  useEffect(() =>{
    if (
      nameError ||
      addressError ||
      phoneError ||
      pickupError ||
      dateError
    ){
      setFormValid(false);
    }else{
      setFormValid(true);
    }
  },[
    nameError,
    addressError,
    phoneError,
    pickupError,
    dateError,
  ])

  const data = useStaticQuery(graphql`
      {
          strapiRequestAPickup {
              Title_Section_Form
          }
      }
  `)
  return(
    <section>
      <div className="container">
          <h2 className={classes.title}>{data.strapiRequestAPickup.Title_Section_Form}</h2>

        <form
          name="contact v2"
          method="post"
          data-netlify="true"
          onSubmit="submit"
          className={classes.form}>
          <input type="hidden" name="form-name" value="contact v2" />
          <div className={`row ${classes.flexStyles}`}>

            <div className={classes.formGroup}>
              <input onChange={e => nameHandler(e)} value={name} onBlur={e => blurHandler(e)} style={{
                borderColor: nameDirty && nameError ? '#CB0000' : '#787D88',
              }} placeholder={`Office Name`} type="text" className="form-control" name="OfficeName" />
            </div>

            <div className={classes.formGroup}>
              <input onChange={e => addressHandler(e)} value={address} onBlur={e => blurHandler(e)} style={{
                borderColor: addressDirty && addressError ? '#CB0000' : '#787D88',
              }}  placeholder={`Address`} type="text" className="form-control" name="Address" />
            </div>

            <div className={classes.formGroup}>
              <input onChange={e => phoneHandler(e)} value={phone} onBlur={e => blurHandler(e)} style={{
                borderColor: phoneDirty && phoneError ? '#CB0000' : '#787D88',
              }}  placeholder={`Phone Number`} type="tel" className="form-control" name="PhoneNumber" />
            </div>

            <div className={classes.formGroup}>
              <input onChange={e => pickupHandler(e)} value={pickup} onBlur={e => blurHandler(e)} style={{
                borderColor: pickupDirty && pickupError ? '#CB0000' : '#787D88',
              }}  placeholder={`Pickup Details`} type="text" className="form-control" name="PickupDetails" />
            </div>

            <div className={classes.formGroup}>
              <input onChange={e => dateHandler(e)} value={date} onBlur={e => blurHandler(e)} style={{
                borderColor: dateDirty && dateError ? '#CB0000' : '#787D88',
              }}  placeholder={`Requested Date & Time`} type="datetime-local" className={classes.formDate} name="RequestedDate&Time" />
            </div>

          </div>
          <button  disabled={!formValid} className={classes.buttonSubmit} type={`submit`}>Send<img src={Arrow} alt=""/></button>

          {formValid ? <div className={`row ${classes.blockWarning}`}>
            <div>
              {
                !formValid ? <img src={Image2} alt="" /> :
                  <img src={Image1} alt="" />
              }
            </div>
            <p className={classes.warning}> Thank you for your request! A customer service representative will be in touch shortly to confirm the pickup. </p>
          </div> : null
          }


        </form>
      </div>
    </section>
  )
}