import React from 'react';
import {connect} from 'react-redux';
import translation from 'translation'
import {
    Row,
    Col,
    Form,
    Input,
    FormGroup,
    FormText,
    Label,
    Button
} from 'reactstrap'
import { Field, reduxForm } from 'redux-form';
import {
    searchCases
} from './actions';
import { push } from 'react-router-redux';

const InputField = (props) => {
    return (
        <Input type={props.type} {...props.input} />
    )
}

const SearchCases = ({handleSubmit, onSubmit}) => {
    return (
        <Row>
            <Col>
                <h4>{translation.t('OPEN_CASE_HEADER')}</h4>
                <Form onSubmit={handleSubmit(onSubmit)}>
                    <legend>
                        {translation.t('SEARCH_HELP_TEXT')}
                    </legend>
                    <FormGroup className="mb-3">
                        <Label htmlFor="lastName">{translation.t('LAST_NAME_INPUT')}</Label>
                        <Field name="lastName" component={InputField} type="text" />
                        <FormText color="muted">{translation.t('LAST_NAME_HELP')}</FormText>
                    </FormGroup>
                    <FormGroup>
                        <Label htmlFor="dateOfBirth">{translation.t('DATE_OF_BIRTH_INPUT')}</Label>
                        <Field name="dateOfBirth" component={InputField} type="date" />
                        <FormText color="muted">{translation.t('DOB_HELP')}</FormText>
                    </FormGroup>
                    <Button className="mb-3" color="danger" size="sm" >{translation.t('SUBMIT_SEARCH_BUTTON')}</Button>
                </Form>
            </Col>
        </Row> 
    )
}

class SearchCasesContainer extends React.Component {

    constructor() {
        super();
        this.handleSearchSubmit = this.handleSearchSubmit.bind(this);
    }

    handleSearchSubmit(values) {
        const { dispatch } = this.props;
        dispatch(searchCases(values));
        dispatch(push('/cases'))
    }

    render() {
        return (
            <SearchCases {...this.props} onSubmit={this.handleSearchSubmit} />
        )
    }
}


export default reduxForm({
  // a unique name for the form
  form: 'search'
})(SearchCasesContainer);
@@ -350,16 +350,419 @@
 edux';%0A%0A
+const validate = values =%3E %7B%0A  const errors = %7B%7D%0A  if (!values.lastName) %7B%0A    errors.lastName = 'Required'%0A  %7D%0A  return errors%0A%7D%0A%0Aconst renderField = (%7B%0A  input,%0A  label,%0A  type,%0A  meta: %7B touched, error %7D%0A%7D) =%3E (%0A  %3Cdiv%3E%0A    %3Clabel%3E%7Blabel%7D%3C/label%3E%0A    %3Cdiv%3E%0A      %3Cinput %7B...input%7D placeholder=%7Blabel%7D type=%7Btype%7D /%3E%0A      %7Btouched &&%0A        ((error && %3Cspan%3E%7Berror%7D%3C/span%3E))%7D%0A    %3C/div%3E%0A  %3C/div%3E%0A)%0A%0A
 const In
@@ -781,24 +781,45 @@
 props) =%3E %7B%0A
+  console.log(props)%0A
     return (
@@ -1293,157 +1293,144 @@
    %3C
-Label htmlFor=%22lastName%22%3E%7Btranslation.t('LAST_NAME_INPUT')%7D%3C/Label%3E%0A                        %3CField name=%22lastName%22 component=%7BInputField%7D type=%22text%22
+Field%0A        name=%22lastName%22%0A        type=%22text%22%0A        component=%7BrenderField%7D%0A        label=%7Btranslation.t('LAST_NAME_INPUT')%7D%0A     
  /%3E%0A
@@ -2072,17 +2072,16 @@
   %3C/Row%3E
- 
 %0A    )%0A%7D
@@ -2475,16 +2475,28 @@
 s.props%7D
+%0A           
  onSubmi
@@ -2621,16 +2621,28 @@
 'search'
+,%0A  validate
 %0A%7D)(Sear
@@ -2659,8 +2659,9 @@
 tainer);
+%0A

Add Validators on Search (#52)