import React, { useState, useEffect } from 'react'; 
import {Icon, Select, TextInput, Button} from 'react-materialize';
import './Cash.css';
import axios from 'axios';

const MakeMoneyMove = (props) => {

  const [selectedFrom, setSelectedFrom] = useState(""); 
  const [selectedTo, setSelectedTo] = useState(""); 
  const [homiesCash, setHomiesCash] = useState([]);
  const [amountToMove, setAmountToMove] = useState(null);

  useEffect( () => { 
    const getCashForHomies = async () => {
      try { 
        const cash = await axios.get(`/homies/cash`);
        setHomiesCash(cash.data);
      } catch (e) {
        console.log("Error fetching", e); 
      }
    };
    getCashForHomies(); 
  }, []);

  const handleAmountChange = (e) => {
    setAmountToMove(parseFloat(e.target.value))
  }

  const homieToOptionMapper = (homieCash) => {
    const homie = homieCash.homie;
    return (
    <option key={homie.id} value={homie.id}>{homie.name}</option>
    );
  };

  const homieOptions = homiesCash.map(homieToOptionMapper);    
  
  const handleFromHomieChange = (e) => {
    console.log("from homie", e.target.value);
    setSelectedFrom(e.target.value); 
  };
  const filteredHomieCashes = homiesCash.filter( (homieCash) => homieCash.homie.id !== parseInt(selectedFrom) );
  const filteredHomieOptions = filteredHomieCashes.map(homieToOptionMapper); 

  const handleToHomieChange = (e) => {
    setSelectedTo(e.target.value); 
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Submitting");
  }

  const formComplete = () => (
    selectedFrom !== "" && 
    selectedFrom !== selectedTo && 
    selectedTo !== "" &&
    amountToMove > 0
  );

return (
<div className="center-align">
   <form onSubmit={handleSubmit}>
   <h3>Make Money Move</h3>
   <TextInput label="How Much?" type="number" 
               required pattern="^\\?(([1-9](\\d*|\\d{0,2}(,\\d{3})*))|0)(\\.\\d{1,2})?$" 
               defaultValue={`${amountToMove}`} step="0.01" onChange={handleAmountChange} />
     <label>From: </label>
     <Select  value={selectedFrom} name="from_homie" onChange={handleFromHomieChange}>
       <option disabled value="" >Select Homie</option>
        {homieOptions}
     </Select>

     <label>To: </label>
     <Select  value={selectedTo} name="to_homie" onChange={handleToHomieChange}>
        <option disabled value="">Select Homie</option>
        {filteredHomieOptions}
      </Select>
      
    
      <div>  
      <Button disabled={!formComplete()} waves="light">
        Do it
       <Icon left>
         attach_money
       </Icon>
      </Button>
      </div>
   </form>
</div>
);

}

export default MakeMoneyMove;