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

class FormComponent extends BaseForm {

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

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

        return (
            <View
                style={this.styles()}>
                {children}
            </View>
        )
    }
    private styles() {
        return {
            height: 50,
        }
    }
}

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

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

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