import * as React from "react";
import FormContext from "./FormContext";
import {remove, isEmpty, isArray} from 'lodash';
import {validateFunc} from '../function'
import * as moment from 'moment';

interface Props {
    onSubmit: any,
    lang?: string,
    loading?: boolean,
    size?: string
}

interface State {
    click: boolean,
    messages: any[],
    lang: string,
    loading?: boolean,
    size?: string | null
}

class Form extends React.Component<Props, State> {

    constructor(props: Props, public state: State) {
        super(props);

        this.state = {
            ...state,
            click: false,
            messages: [],
            lang: this.props.lang || 'tr',
            loading: props.loading,
            size: props.size || null
        };

        moment.locale(this.props.lang || 'tr');
    }

    componentWillReceiveProps(nextProps:any) {
        if(nextProps.loading !== this.props.loading) {
            this.setState({
                loading: nextProps.loading
            })
        }

        if(nextProps.size !== this.props.size) {
            this.setState({
                size: nextProps.size
            })
        }
    }

    handleSubmit(event: any) {
        event.preventDefault();
        this.setState({click: true});
        if (this.state.messages.length) {
            return;
        }

        this.props.onSubmit();
    }

    validate(id:any, val:any, validateSpecs:any[], errMsg:string, doValidate: boolean, componentName: string) {
        if (isArray(validateSpecs) && id && doValidate) {
            const err = validateFunc(validateSpecs, val, errMsg, this.state.lang);
            const {messages} = this.state;
            const msgs = messages;

            remove(msgs, (item:any) => item.id === id);

            if (err.length > 0) {
                msgs.push({
                    id: id,
                    messages: err[0],
                    componentName
                });
            }

            this.setState({
                messages: msgs
            })
        }
    }

    formChange() {
        if(!isEmpty(arguments)) {
            this.validate(arguments[0],arguments[1],arguments[2],arguments[3], arguments[4], arguments[5])
        }
    }

    render():JSX.Element {
        const formContextInstance:any = {
            click: this.state.click,
            validate: (id:any, val:any, specs:any[], errMsg:string, doValidate:boolean, name: string) => this.validate(id, val, specs, errMsg, doValidate, name),
            messages: this.state.messages,
            lang: this.state.lang,
            size: this.state.size,
            loading: this.state.loading
        };

        return (
            <FormContext.Provider value={formContextInstance}>
                <form
                    onSubmit={(e:any) => this.handleSubmit(e)}
                    onChange={()=>this.formChange()}
                    className=""
                >
                    {this.props.children}
                    {/*{this.state.loading ? <div className="jump-ui-form-loading">
                        {RenderHtml.renderLoading(true)}
                    </div> : null}*/}
                </form>

            </FormContext.Provider>
        );
    }
}

export default Form;