'use strict';
const e = React.createElement;
const ReactInputMask = window.ReactInputMask

class LikeButton extends React.Component {
    constructor(props) {
        super(props);
        this.fileInput = React.createRef();
        this.state = {
            phoneIsValid: true,
            fileIsValid: true,
            phone: '',
        };

        this.handleChangePhone = this.handleChangePhone.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChangePhone(event) {
        let phone = event.target.value.replace(/\s+/g, '');
        this.setState({
            phone: phone,
        });
    }

    handleValidation(){
        let phone = this.state.phone;
        let file = this.fileInput.current.files[0];
        let formIsValid = {
            phoneIsValid: true,
            fileIsValid: true
        };
        let fileIsValid = true;

        if(phone.length !== 15){
            formIsValid.phoneIsValid = false;
        }
        //Name
        if(!file || (file.size > (10 * 1024 * 1024))){
            formIsValid.fileIsValid = false;
        }
        if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
            formIsValid.fileIsValid = false;
        }
        return formIsValid;
    }

    handleSubmit(event) {
        event.preventDefault()
        let formIsValid = this.handleValidation()
        if(formIsValid.phoneIsValid && formIsValid.fileIsValid){
            let data = new FormData();
            data.append('phone', this.state.phone);
            data.append('file', this.fileInput.current.files[0]);
            console.log(this.state.phone);
            fetch('http://belarus2020.org/api/v1/vote', {
                method: 'POST',
                body: data
            })
                .then(response => {

                    this.setState({
                        success: true,
                        phone: '',
                        file: null,
                    })
                })
                .catch(() => this.setState({ success: false}));
        }
        else{
            this.setState({
                phoneIsValid: formIsValid.phoneIsValid,
                fileIsValid: formIsValid.fileIsValid,
            })
        }

    }


    render() {
        const phoneIsValid = this.state.phoneIsValid;
        const fileIsValid = this.state.fileIsValid;
        const success = this.state.success;
        if (success) {
            return (<div className="finalMessage"><span>Ваши данные учтены, спасибо за участие</span></div>);
        }
        return (
            <form onSubmit={this.handleSubmit}>
                <label htmlFor="phone">Номер телефона</label>
                <ReactInputMask id='phone' type='text' mask="+375(99)999 99 99" maskChar=" " value={this.state.phone} onChange={this.handleChangePhone}/>
                {phoneIsValid
                        ? <span> </span>
                        : <span>Введите действительный номер телефона.</span>
                    }
                <div className="example-2">
                    <div className="form-group">
                        <label htmlFor="file">Фотография бюллетеня</label>
                        <input type="file" name="file" ref={this.fileInput} id="file" accept="image/*,.pdf" multiple='false' className="input-file" />
                            <label htmlFor="file" className="btn btn-tertiary js-labelFile">
                                <i className="icon fa fa-check" />
                                <span className="js-fileName"> Загрузить файл</span>
                            </label>
                        </div>
                </div>
                {fileIsValid
                    ? <span> </span>
                    : <span>Выберите фотографию. Размер фотографии не должен привышать 10 Мб.</span>
                }
                <button className="glo" type="submit" value="Submit">Отправить</button>
            </form>
        )
    }
}

const domContainer = document.querySelector('#phone_input');
ReactDOM.render(e(LikeButton), domContainer);