Step 2

import React, {useState} from 'react'
import { useForm } from "react-hook-form";
import { useData, useProduct } from '../../utils/DataProvider'
import Display from './Display';
import screen from '../../assets/mock/display.png' // TODO: remove me after


const Step2 = (props) => {
  const serverProducts =  props.data;
  const [state, setState] = useData()
  const [products, setProducts] = useProduct();

  const [isType, setType] = useState('Indoor');

  const types = ["Indoor", "Outdoor"];
  const indoorProductsData = serverProducts && serverProducts.filter(e => e["Indoor / Outdoor"] === 'INDOOR');
  const outdoorProductsData = serverProducts && serverProducts.filter(e => e["Indoor / Outdoor"] === 'OUTDOOR');

  const filterTypes = (data) =>  (data.map(e => (
    {
      id: e.ID,
      name: e.Product
    }
  )))
  const {handleSubmit } = useForm();

  const onSubmit = data => {
    setState(
      state => ({
        ...state,
        step: 3
      })
    );

    setProducts(products => {
      const activeProduct = products[state.activeProductIndex];
        activeProduct.typeId= 6;
        activeProduct.typeName= data.types;
        activeProduct.productId= Math.floor(Math.random() * 10);
        activeProduct.productName= data.serverProducts;
        return [...products];
    });
  }


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

        <Display data={screen} />

        <div className="form__item">
          <label htmlFor="type" className="form__label">Type</label>
          <select
              className="ui-select"
              name="type"
              onChange={(e) => setType(e.target.value)}
              >
            {types && types.map(value => (
              <option key={value} value={value}>
                {value}
              </option>
            ))}
          </select>
        </div>
        <div className="form__item">
          <label htmlFor="serverProducts" className="form__label">Product</label>
          <select
              className="ui-select"
              name="serverProducts"
            >
            { isType === 'Indoor' && filterTypes(indoorProductsData).map(item => (
              <option key={item.id} value={item.name}>
                {item.name}
              </option>

            ))}

            { isType === 'Outdoor' && filterTypes(outdoorProductsData).map(item => (
              <option key={item.id} value={item.name}>
                {item.name}
              </option>
            ))}

          </select>
        </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;