import {isEqual} from 'underscore';
import React, {Component} from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import Icon from './components/Icon';
import classNames from 'classnames';
import {Fields} from './index';
import defaultProps from './defaultProps';
import shortId from 'shortid';
import store from './store';

const IconRoller = require('./assets/icons/rolling.svg');
const successFormIcon = require('./assets/icons/success-form.svg');
const errorFormIcon = require('./assets/icons/error.svg');

export default class Form extends Component {
    static defaultProps = {
        disabled: false,
    };

    constructor(props) {
        super(props);
        this.id = shortId();
        store[this.id] = {};
    }


    state = {
        isFetch: false,
        success: null,
        error: null,
    };

    get isFetching() {
        return this.state.isFetch
    }

    set isFetching(val) {
        this.setState({isFetch: val})
    }

    get fields(){
        if(store[this.id]){
            return store[this.id]
        }
    }

    success() {
        return new Promise((resolve) => {
            this.setState({success: true, error: null}, () => {
                let timer = setInterval(() => {
                    clearInterval(timer);
                    this.setState({success: null}, () => {
                        resolve();
                    });
                }, 1100)
            })
        })
    }

    error() {
        return new Promise((resolve) => {
            this.setState({success: null, error: true}, () => {
                let timer = setInterval(() => {
                    clearInterval(timer);
                    this.setState({error: null}, () => {
                        resolve();
                    });
                }, 1100)
            })
        })
    }

    componentWillUnmount(){
        delete store[this.id];
    }

    onSubmit(e) {
        e.preventDefault();
        if (this.props.onSubmit) {
            this.validateForm().then((data) => {
                let method = this.props.onSubmit(data, this.form);
                if (method && method.then) {
                    method.then(() => {
                        // this.clear();
                        // this.success();
                    })
                }
            })
        }
    }

    validateForm() {
        let fields = this.fields;
        let promises = [];
        for(let fieldName in fields){
            let field = fields[fieldName];
            if(Array.isArray(field)){
                let type = field[0].type;
                field = field.filter(f => f.type === type);
                if(type === 'checkbox'){
                    promises.push(Promise.resolve({
                        [fieldName]: field.map(f => f._value).filter(i => i)
                    }))
                }else if(type === 'radio'){
                    let selectedField = field.find(f => f._value);
                    promises.push(Promise.resolve({
                        [fieldName]: selectedField && selectedField._value
                    }))
                }
            }else{
                promises.push(field.validate().then((value) => {
                    return {[fieldName]: value}
                }).catch((error) => {
                    return Promise.reject({[fieldName]: {error}})
                }))
            }
        }
        return Promise.all(promises).then((resp) => {
            let data = {};
            if (resp && resp.length) {
                resp.forEach((item) => {
                    data = Object.assign(data, item);
                })
            } else {
                data = resp;
            }
            return data;
        })
    }

    render() {
        let {success, error} = this.state;
        let {disabled, title, isFetching} = this.props;
        isFetching = isFetching || this.isFetching;

        return <form
            id={this.id}
            ref={e => this.form = e}
            data-sbx-form={true}
            onSubmit={this.onSubmit.bind(this)}
            className="form-form"
            autoComplete="off"
        >
            {/*<ReactCSSTransitionGroup*/}
                {/*component="div"*/}
                {/*transitionName="form-fadeIn"*/}
                {/*transitionEnterTimeout={200}*/}
                {/*transitionLeaveTimeout={200}>*/}
                {/*{success && <div className="form-form__success">*/}
                    {/*<Icon src={successFormIcon} className="form-form__success-icon"/>*/}
                {/*</div>}*/}
                {/*{error && <div className="form-form__error">*/}
                    {/*<Icon src={errorFormIcon} className="form-form__error-icon"/>*/}
                {/*</div>}*/}
            {/*</ReactCSSTransitionGroup>*/}
            {/*<ReactCSSTransitionGroup*/}
                {/*component="div"*/}
                {/*transitionName="form-fadeIn"*/}
                {/*transitionEnterTimeout={200}*/}
                {/*transitionLeaveTimeout={200}>*/}
                {/*{isFetching && <div className="form-form__preloader">*/}
                    {/*<Icon src={IconRoller} className="form-form__preloader-icon"/>*/}
                {/*</div>}*/}
            {/*</ReactCSSTransitionGroup>*/}
            <fieldset
                ref={e => this.fieldset = e}
                disabled={disabled || isFetching}
                className={classNames({
                    'form-form__fieldset': true,
                    'form-form__fieldset_loading': isFetching,
                })}>
                {title && <h3>{title}</h3>}
                {this.props.children}
            </fieldset>
        </form>;
    }
}