import React, {useState, useEffect} from 'react';
import M from 'materialize-css';
import {Icon, Select, Button, Textarea} 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);
    const [moveDescription, setMoveDescription] = useState("");
    const [submitInProgress, setSubmitInProgress] = useState(false);

    useEffect(() => {
        const getCashForHomies = async () => {
            try {
                const cash = await axios.get(`/api/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) => {
        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 handleDescriptionChange = (e) => {
        setMoveDescription(e.target.value);
    }

    const clearForm = () => {
        setAmountToMove("");
        setSelectedFrom("");
        setSelectedTo("");
        setMoveDescription("");
    }

    const handleSubmit = async (e) => {
        e.preventDefault();
        setSubmitInProgress(true);
        const moneyMoveRequest = {
            money_move: {
                amount: amountToMove,
                from_homie_id: selectedFrom,
                to_homie_id: selectedTo,
                description: moveDescription
            }
        }

        const submitResponse = await axios.post('/api/money_moves', moneyMoveRequest);

        if (submitResponse && submitResponse.status === 200 && submitResponse.data === true) {
            M.toast({html: "Money lounde...moved"});
            clearForm();
        } else {
            M.toast({html: "Yo! It ain't workin'"});
        }
        setSubmitInProgress(false);
    }

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

    const disableSubmit = () => (!formComplete() || submitInProgress);

    return (
        <div className="center-align container">
            <form onSubmit={handleSubmit}>
                <h3>Make Money Move</h3>

                <div className="input-field col s12">
                    <input id="how-much" type="number" className="validate" step="0.01" required="required" value={amountToMove} onChange={handleAmountChange} pattern="^\\?(([1-9](\\d*|\\d{0,2}(,\\d{3})*))|0)(\\.\\d{1,2})?$" />
                    <label className="required" htmlFor="how-much">How much?</label>
                    <span className="helper-text" data-error="Yo! Put some money" />
                </div>

                <label>From (only if you can say): </label>
                <Select value={selectedFrom} name="from_homie" onChange={handleFromHomieChange}>
                    <option value="">NOT SAYIN'</option>
                    {homieOptions}
                </Select>

                <label className="required">To: </label>
                <Select value={selectedTo} name="to_homie" onChange={handleToHomieChange} required="required">
                    <option disabled value="">Select Homie</option>
                    {filteredHomieOptions}
                </Select>

                <br/>

                <Textarea label="Tag" value={moveDescription} onChange={handleDescriptionChange}/>

                <div>
                    <Button disabled={disableSubmit()} waves="light">
                        Do it
                        <Icon left>
                            attach_money
                        </Icon>
                    </Button>
                </div>
            </form>
        </div>
    );

}

export default MakeMoneyMove;