import React, { Component } from 'react';
import { object } from 'prop-types';
import { connect } from 'react-redux';

import { getFormSubmitErrors, getFormSyncErrors, getFormMeta } from 'redux-form';

export default formName => WrappedComponent =>
    connect(state => ({
        submitErrors: getFormSubmitErrors(formName)(state),
        syncErrors: getFormSyncErrors(formName)(state),
        meta: getFormMeta(formName)(state),
    }))(
         class WithValidationErrors extends Component {
            static propTypes = {
                meta: object,
                submitErrors: object,
                syncErrors: object,
            };

            static defaultProps = {
                meta: {},
                submitErrors: {},
                syncErrors: {},
            };

            combineErrors({ submitErrors, meta, syncErrors }) {

                const errorsToShow = {};
                const errorKeys = [...Object.keys(submitErrors), ...Object.keys(syncErrors)];

                errorKeys
                    .filter((value, index, arr) => arr.indexOf(value) === index)
                    .forEach(key => {
                        if (!(meta[key] && meta[key].touched && !meta[key].active)) return;

                        if (key in syncErrors) errorsToShow[key] = syncErrors[key];
                        if (key in submitErrors) {
                            if (key in errorsToShow) {
                                errorsToShow[key] += `; ${submitErrors[key]}`;
                            } else {
                                errorsToShow[key] = submitErrors[key];
                            }
                        }
                    });

                return errorsToShow;
            }

            render() {
                const errorsToShow = this.combineErrors(...this.props);

                return <WrappedComponent {...this.props} errorsToShow={errorsToShow} />;
            }
        }
    );