import React, { useState } from "react";
import ReactDOM from "react-dom";
import useForm from "react-hook-form";
import Input from "@material-ui/core/Input";
import Select from "react-select";

import "./index.css";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const MyInput = ({ name, label, register }) => {
  return (
    <>
      <label htmlFor={name}>{label}</label>
      <input name={name} placeholder="Jane" ref={register} />
    </>
  );
};

function App() {
  const { register, handleSubmit, setValue } = useForm();
  const onSubmit = data => {
    alert(JSON.stringify(data, null));
  };
  const [values, setReactSelect] = useState({
    selectedOption: []
  });

  const handleMultiChange = selectedOption => {
    setValue("reactSelect", selectedOption);
    setReactSelect({ selectedOption });
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <Input
            style={{
              marginBottom: "20px"
            }}
            name="HelloWorld"
            inputRef={register}
            placeholder="Title"
            inputProps={{
              "aria-label": "Description"
            }}
          />
        </div>

        <div>
          <lable className="reactSelectLabel">React select</lable>
          <Select
            className="reactSelect"
            name="filters"
            placeholder="Filters"
            value={values.selectedOption}
            options={options}
            onChange={handleMultiChange}
            ref={e => register({ name: "reactSelect" })}
            isMulti
          />
        </div>

        <div>
          <MyInput name="firstName" label="First Name" register={register} />
        </div>

        <div>
          <label htmlFor="lastName">Last Name</label>
          <input name="lastName" placeholder="Luo" ref={register} />
        </div>

        <div>
          <label htmlFor="email">Email</label>
          <input
            name="email"
            placeholder="bluebill1049@hotmail.com"
            type="email"
            ref={register}
          />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);