import * as React from 'react'
import * as cx from 'classnames'
import { resetForm, destroyForm, submitFormValid, submitFormInvalid } from './actions'
import { FormProps} from './interfaces'
import { BaseForm } from './base'
import { getForm } from './selectors'
import { connect } from 'react-redux'

const styles = require('../../../src/components/form/styles.scss')

class FormComponent extends BaseForm {

    /**
     * Render a form tag
     */
    public render() {

        const { name, id, children, className, style } = this.props

        return (
            <form
                name={name}
                id={id}
                className={cx(styles.form, className)}
                style={style}
                onSubmit={this.onSubmit}>
                {children}
            </form>
        )
    }
}

const mapStateToProps = (state: any, ownProps: FormProps) => ({
    formData: getForm(state, ownProps.name),
})

const mapDispatchToProps = {
    resetForm,
    destroyForm,
    submitFormValid,
    submitFormInvalid,
}

export const Form = connect(mapStateToProps, mapDispatchToProps)(FormComponent)