step2 final

import React, {useState, useEffect} from 'react'
import { useForm } from "react-hook-form";
import { useData, useProduct, productsState } from '../../utils/DataProvider'
import Display from './Display';
import _ from 'lodash';

const Step2 = (props) => {
  const { allProducts } = props;
  const [state, setState] = useData()
  const [products, setProducts] = useProduct();

  const currentProductSelection = products[state.activeProductIndex];
  const currentProduct = !!currentProductSelection.productName ?
    _.find(allProducts, {"Product": currentProductSelection.productName}) :
    allProducts[0];

  const types = ["Indoor", "Outdoor"];
  const [productType, setProductType] = useState(currentProduct["Indoor / Outdoor"]);

  const {handleSubmit, register } = useForm();

  const onSubmit = data => {
    handleFormControlChange(false, 'productName', data.productName)
    console.log(data);
    setState(
      state => ({
        ...state,
        step: 3
      })
    );
  }

  const handleFormControlChange = (e, key, value) => {
    setProducts(products => {
      let activeProduct = products[state.activeProductIndex];
      Object.assign( activeProduct, productsState);
      activeProduct[key] = value;
      return [...products];
    });
  }

  return (
    <form className="form-root" onSubmit={handleSubmit(onSubmit)}>
      <div className="form form--step2">

        <Display data={currentProduct.image} />
        <div className="form__item">
          <label htmlFor="type" className="form__label">Type</label>
          <select
              className="ui-select"
              name="type"
              ref={register}
              defaultValue={productType.toLowerCase()}
              onChange={(e) => {
                setProductType(e.target.value);
                if (!currentProduct["Product"]) {
                  handleFormControlChange(e, "productName", allProducts.filter( p => p["Indoor / Outdoor"].toLowerCase() === productType.toLowerCase())[0]["Product"])
                }
                console.log('product type should set to:', e.target.value);
              }}
              >
            {types.map(value => (
              <option key={value} value={value.toLowerCase()}>
                {value}
              </option>
            ))}
          </select>
        </div>
        <div className="form__item">
          <label htmlFor="productName" className="form__label">Product</label>
          <select
              className="ui-select"
              name="productName"
              ref={register}
              defaultValue={currentProduct["Product"]}
              onChange={(e) => {
                handleFormControlChange(e, 'productName', e.target.value);
              }}
            >
            {allProducts.filter( p => p["Indoor / Outdoor"].toLowerCase() === productType.toLowerCase() ).map(item => (
              <option selected={currentProduct["Product"] === item.Product} key={item.ID} value={item.name} id={item.id}>
                {item.Product}
              </option>
            ))}
          </select>
        </div>
        <div className="form__item">
          <div className="desc-box">
            <span className="desc-box__label">Description</span>
            <span className="desc-box__content">{currentProduct["Description"]}</span>
          </div>
        </div>
      </div>
      <div className="button-nav">
        <div>
        <button className="btn" onClick={() => setState(state => ({...state,step: 1}))}>Previous</button>
        </div>
        <div>
          <button className="btn btn--active" type="submit">Next</button>
        </div>
      </div>
    </form>
  )
}
export default Step2;