import React, { useState } from 'react';
import { Button, Collapsible, CollapsibleItem, Select, TextInput } from 'react-materialize';
import axios from 'axios';
import { errorToast } from "../common/errorHelpers";
import M from 'materialize-css';

const NewHomieForm = (props) => {
  const [homieName, setHomieName] = useState("");
  const [aboutHomie, setAboutHomie] = useState("");
  const [homieImportance, setHomieImportance] = useState("");
  const [busy, setBusy] = useState(false);

  const gang = props.gang;

  const disableAddButton = () => {
    return homieName.length === 0 ||
      homieImportance === "" ||
      busy;
  }

  const clearForm = () => {
    setHomieName("");
    setAboutHomie("");
    setHomieImportance("");

    const collapsible = document.getElementById('new-homie-form-container');
    const collapsibleInstance = M.Collapsible.getInstance(collapsible);

    collapsibleInstance.close(0);
  }

  const addNewHomie = async () => {
    setBusy(true);
    const newHomie = {
      homie: {
        name: homieName,
        about: aboutHomie,
        importance: parseInt(homieImportance),
        gang_id: gang.id
      }
    }

    try{
      const response = await axios.post('/api/homies', newHomie);
      if (response.status === 200 && response.data) {
        props.newHomiesSetter(response.data);
        M.toast({ html: 'Welcome to the hood' });
        clearForm();
      }else{
        errorToast();
      }
    }catch (e) {
      console.log(e.message);
      errorToast();
    }

    setBusy(false);
  }

  return (
    <div>
      <Collapsible id="new-homie-form-container">
        <CollapsibleItem header={<strong>{`Introduce new homie to the ${gang.name} gang`}</strong>}>
          <div className="input-field col s12">
            <input id="homie-name" type="text" className="validate" required="required" value={homieName} onChange={(e) => setHomieName(e.target.value)} />
            <label className="required" htmlFor="homie-name">Homie name</label>
            <span className="helper-text" data-error="Yo! Introduce us the new homie" />
          </div>

          <TextInput
            id="aboutHomie"
            label="About"
            value={aboutHomie}
            onChange={(e) => setAboutHomie(e.target.value)}
          />

          <label className="required">Homie importance: </label>
          <Select value={homieImportance} onChange={(e) => setHomieImportance(e.target.value)} name="homieImportance">
            <option disabled value="">Set homie importance</option>
            <option value={100}>Homie for life</option>
            <option value={75}>Real homie</option>
            <option value={50}>Alright</option>
            <option value={25}>Foo homie</option>
            <option value={0}>Guy from the hood</option>
          </Select>

          <br/>

          <Button disabled={disableAddButton()} onClick={addNewHomie}>Add to the hood</Button>

        </CollapsibleItem>
      </Collapsible>
    </div>
  )
}

export default NewHomieForm;