import React, { Component, Fragment } from "react";

import "./adminPhotogalary.scss";
import { form } from "../../state/photogalaryFormData";
import Input from "../input/input";
import Select from "../select/select";
import Button from "../button/button";
import Header from '../adminHeader/adminHeader';

export default class PhotogalaryForm extends Component {

    state = {
        form,
        validForm: false
    }

    validator = (rules, value) => {
        const { requred, minL } = rules;

        let valid = true;
        if (requred) {
            valid = value.trim() === "" && valid;
        }

        if (minL) {
            valid = value.trim().length < minL && valid;
        }

        return valid;
    };

    submit = e => {
        e.preventDefault();

        const values = Object.keys(this.state.form).reduce((prev, elem) => {
            return { ...prev, [elem]: this.state.form[elem].value };
        }, {});

        this.props.submitHandler(values);
    };

    onChangeHandler = e => {
        const { name, value, id } = e.target;

        this.setState(prevState => {
            const values = Object.keys(prevState.form).reduce((prev, elem) => {
                if (elem === name) return prev.concat(value);
                return prev.concat(prevState.form[elem].value);
            }, []);

            return {
                ...prevState,
                form: {
                    ...prevState.form,
                    [name]: {
                        ...prevState.form[name],
                        value,
                        touch: true,
                        // fail: this.validator(prevState.form[name].validation, value)
                    },
                    pictures: prevState.form.pictures.map(el => (el.id === +id ? { ...el, value } : el))
                },
                validForm: values.some(value => value)
            };
        });
    };

    addPicture = (e) => {
        this.setState(prevState => ({
            ...prevState,
            form: {
                ...prevState.form,
                pictures: prevState.form.pictures.concat({
                    id: +Math.random()
                        .toString()
                        .substr(2, 100),
                    type: "input",
                    name: "pictures",
                    label: "Picture",
                    placeholder: 'Enter picture url',
                    value: ""
                })
                // ...prevState.form.pictures,
                // value: prevState.form.pictures.value.concat(e.value)
                // 	id: Math.random()
                // 	.toString()
                // 	.substr(2, 100),
                // 	value: prevState.form.pictures.value.concat({
                // 		id: Math.random()
                // 			.toString()
                // 			.substr(2, 100),
                // 		url: ""
                // )
                // }
            }
        }));
    };

    render() {
        const { form, validForm } = this.state;
        console.log(this.state)

        const { error } = this.props;
        const disPictureAdd = form.pictures.every(el => el.value)
        const disPictureRm = form.pictures.length === 1;

        return (
            <>
                <Header />
                <div className="photogalary-form">
                    <div className="photogalary-form__content">
                        <h2 className="photogalary-form__form-title">ADD EVENT PHOTOGALARY</h2>
                        <form onSubmit={this.submit} className="photogalary-form__photogalary-form">

                            <div className="photogalary-form__photogalary-form__selects">
                            {Object.keys(form.selects).map((input_name, index) => (
                                <Select
                                    key={form.selects[input_name].id}
                                    id={form.selects[input_name].id}
                                    name={form.selects[input_name].name}
                                    // value={form.selects[input_name].value}
                                    fail={form.selects[input_name].fail}
                                    touch={form.selects[input_name].touch}
                                    label={form.selects[input_name].label}
                                    placeholder={form.selects[input_name].placeholder}
                                    onChange={this.onChangeHandler}
                                >
                                    {form.selects[input_name].options.map(elem =>
                                        <option key={elem} value={elem}> {elem} </option>)}

                                </Select>
                            )
                            )}
                            </div>

                            {form.pictures.map((el, i) => (
                                <div key={`${el.id}/${i}`}>

                                    {console.log('elem', el)}
                                    <Input
                                        className = "photogalary-form__picture-input"
                                        id={el.id}
                                        name={el.name}
                                        value={el.value}
                                        label={el.label}
                                        // key={form[input_name].id}
                                        // id={form[input_name].id}
                                        // name={form[input_name].name}
                                        // value={el.url}
                                        // fail={form[input_name].fail}
                                        // touch={form[input_name].touch}
                                        // label={form[input_name].label}
                                        placeholder={el.placeholder}
                                        onChange={this.onChangeHandler}
                                    />

                                    {/* {!disPictureRm && <Button text="-" onClick={rmHobby.bind(null, el.id)} />} */}
                                </div>
                            ))}
                            <Button className="photogalary-form__picture-btn" text="Add Picture" onClick={this.addPicture} disabled={!disPictureAdd} />

                            {error && <p className="photogalary-form__error-photogalary-text">{error}</p>}
                            <div className="photogalary-form__control-box">
                                <Button disabled={!validForm} className="photogalary-form__submit-btn" type="submit" text="Add Photogalary" />
                            </div>
                        </form>
                    </div>
                </div>
            </>
        );
    }
}