import React, {useState, useEffect} from 'react'
import {
    Dialog,
    DialogActions,
    DialogContent,
    DialogContentText,
    Button,
    DialogTitle, } from '@material-ui/core';
import firebase from '../../../../firebase'
import Input from '../../../../components/UI/Input/Input'
import { addProductForms } from '../../../../helpers/forms'
import { checkValidity } from 'helpers/utility';

const AddProduct = props => {
    const [formData, setFormData] = useState({...addProductForms});
    const [formState, setFormState] = useState({
        isValid: false,
        values: {},
        touched: {},
        errors: {},
        errorMsg: {}
    });

    const handleSubmit = (data) => {
        data.preventDefault();

        if(formElementsArray.length === Object.keys(formState.values).length){
            let validation = false
            for(let i in formState.errors){
                (formState.errors[i] === false) ? validation = false : validation = true
            }
            if(validation === true) return false
            test01(!validation)
            firebase.addProduct(formElementsArray[0].config.value, formState.values)
            console.log('Pomyślnie dodano do bazy')
        }
        else return false
    };

    const updateFormData = (event, name ) => {
        event.persist()
        var values = { ...formData }
        values[name].value = event.target.value
        setFormData(values);

        let error = checkValidity(event.target.value, values[name].validation)

        setFormState(formState => ({
            ...formState,
            values: {
                ...formState.values,
                [name]:
                event.target.type === 'checkbox'
                ? event.target.checked
                : event.target.value
            },
            errors: {
                ...formState.errors,
                [name]: !error ? false : true
            },
            errorMsg: {
                ...formState.errorMsg,
                [name]: !error ? '' : error
            },
            touched: {
                ...formState.touched,
                [name]: true
            }
        }));
    };

    var formElementsArray = []
    for (let key in formData) {
        formElementsArray.push({
            id: key,
            config: formData[key]
        });
    }

    const clearFormData = () => {
        for(let i in formData) {
            var values = { ...formData }
            values[i].value = ""
            setFormData(values);
        }
    }

    useEffect(() => {
        clearFormData();
    }, [props.open])

    const hasError = field =>
        formState.touched[field] && formState.errors[field] ? true : false;

    console.log(formState)

    let viewForm =(
    <DialogContent>
        {formElementsArray.map( formElement => (
        <Input
            key={formElement.id}
            setkey={formElement.id}
            elementType={formElement.config.elementType}
            elementConfig={formElement.config.elementConfig}
            value={formElement.config.value || ''}
            changed={e => updateFormData(e, formElement.id)}
            shouldValidate={formElement.config.validation}
            touched={formElement.config.touched}
            error={formState.errors[formElement.id]}
            errorMsg={formState.errorMsg[formElement.id]} />
        ))}
    </DialogContent>
    );

    const test01 = (value) => {
        if(value) return `${props.changed}`
        else return console.log('Błąd danych uzupełnij dane.')
    }

    return(
    <Dialog
        open={props.open}
        aria-labelledby="form-dialog-title"
        fullWidth={true}
        onClose={props.checked} >
        <DialogTitle id="form-dialog-title">Dodaj sprzęt</DialogTitle>
        <form onSubmit={handleSubmit}>
        {viewForm}
        <DialogActions>
            <Button onClick={props.checked} color="primary">
            Anuluj
            </Button>
            <Button type="submit" onClick={test01} color="primary">
            Dodaj
            </Button>
        </DialogActions>
        </form>
    </Dialog>
    )

}

export default AddProduct;