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';
import {errorToast} from "../common/errorHelpers";

const PutInWork = (props) => {
    const [homies, setHomies] = useState([]);
    const [selectedTo, setSelectedTo] = useState('');
    const [amountToAdd, setAmountToAdd] = useState('');
    const [workDescription, setWorkDescription] = useState('');
    const [submitInProgress, setSubmitInProgress] = useState(false);

    useEffect(() => {
        (async () => {
            try {
                const response = await axios.get('/api/homies');
                if (response.status === 200 && response.data){
                    setHomies(response.data);
                }
            } catch (e) {
                errorToast();
            }
        })();
    }, []);

    const homieOptions = homies.map(homie => <option key={homie.id} value={homie.id}>{homie.name}</option>);

    const clearForm = () => {
        setAmountToAdd('');
        setSelectedTo('');
        setWorkDescription('');
    }

    const handleSubmit = async (e) => {
        e.preventDefault();
        setSubmitInProgress(true);
        const workRequest = {
            work: {
                amount: parseInt(amountToAdd),
                homie_id: selectedTo,
                description: workDescription
            }
        }

        const submitResponse = await axios.post('/api/work', workRequest);

        if (submitResponse && submitResponse.status === 200 && submitResponse.data && submitResponse.data.ok === true) {
            M.toast({html: "Alright"});
            clearForm();
        } else {
            errorToast();
        }
        setSubmitInProgress(false);
    }

    const formComplete = () => selectedTo !== '' && parseInt(amountToAdd) !== 0 && !isNaN(parseInt(amountToAdd));

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

    return (
        <div className="center-align container">
            <form onSubmit={handleSubmit}>
                <h3>Put in Work</h3>

                <div className="input-field col s12">
                    <input id="how-much" type="number" className="validate" required="required" value={amountToAdd} onChange={(e) => setAmountToAdd(parseInt(e.target.value))} />
                    <label className="required" htmlFor="how-much">How many hours of work?</label>
                    <span className="helper-text" data-error="Yo! Put some work" />
                </div>

                <label className="required">To: </label>
                <Select value={selectedTo} name="to_homie" onChange={(e) => setSelectedTo(e.target.value)} required="required">
                    <option disabled value="">Select Homie</option>
                    {homieOptions}
                </Select>

                <br/>

                <Textarea label="Tag" value={workDescription} onChange={(e) => setWorkDescription(e.target.value)}/>

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

}

export default PutInWork;