import React, { useState } from 'react';
import { TextInput, Button } from "react-materialize";
import axios from "axios";
import M from "materialize-css";

const AddChip = (props) => {
  const [chipName, setChipName] = useState('');
  const [chipSymbol, setChipSymbol] = useState('');
  const [submitInProgress, setSubmitInProgress] = useState(false);

  const handleInputChange = (e) => {
    const newValue = e.target.value;
    switch (e.target.id){
      case 'chipName':
        setChipName(newValue);
        break;
      case 'chipSymbol':
        setChipSymbol(newValue);
        break;
      default:
        break;
    }
  }

  const disableSubmit = () => {
    return submitInProgress || chipName.length === 0 || chipSymbol.length === 0;
  }

  const clearForm = () => {
    setChipName('');
    setChipSymbol('');
  }

  const errorToast = () => M.toast({ html: "Yo! It ain't workin'" });

  const handleSubmit = async () => {
    setSubmitInProgress(true);
    const chipRequest = {
      chip: {
        name: chipName,
        symbol: chipSymbol,
      }
    }

    try{
      const submitResponse = await axios.post('/api/chips', chipRequest);

      if (submitResponse && submitResponse.status === 200 && submitResponse.data) {
        M.toast({ html: "Chipped In" });
        clearForm();
      } else {
        errorToast();
      }
    }catch (e) {
      errorToast();
    }

    setSubmitInProgress(false);
  }

  return (
    <div className='section'>
      <h5>Add New Chip</h5>

      <TextInput
        id='chipName'
        label="Chip Name"
        value={chipName}
        onChange={handleInputChange}
      />

      <TextInput
        id='chipSymbol'
        label="Chip Symbol"
        value={chipSymbol}
        onChange={handleInputChange}
      />

      <Button disabled={disableSubmit()} waves="light" onClick={handleSubmit}>
        Do It
      </Button>
    </div>
  );
}

export default AddChip;