import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';

import block from '../../../helpers/bem-cn';

import Section from '../../Layout/Section/Section';
import Row from '../../Layout/Row/Row';
import Title from '../../Layout/Title/Title';
import FormRow from '../../forms/FormRow';
import FormInput from '../../forms/FormInput/FormInput';
import FormLabel from '../../forms/FormLabel';
import Button from '../../buttons/Button';
import RenderPlugins from '../../forms/RenderPlugins';

import './NewApiForm.css';

const b = block('j-api-form');

const propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    initialValues: PropTypes.object,
};

const ApiForm = (props) => {
    const {
        handleSubmit,
        initialValues,
    } = props;
    const parse = value => (value === undefined ? undefined : parseInt(value));

    return (
        <form onSubmit={handleSubmit}>
            <Section>
                <Row>
                    <Title>Create New API</Title>
                    <Button
                        type="submit"
                        mod="primary"
                    >
                        Submit
                    </Button>
                </Row>
                <div className={b('inner')}>
                    <FormRow>
                        <FormInput component="input" label="Name" attachTo="name" type="text" tooltip="some another tooltip about something usefull" />
                    </FormRow>
                    <FormRow>
                        <FormInput component="input" label="Listen Path" attachTo="proxy.listen_path" type="text" tooltip="LOREM IPSUM" />
                        <FormInput component="input" label="Upstream URL" attachTo="proxy.upstream_url" type="text" />
                        <FormInput component="input" label="Preserve HOST" attachTo="proxy.preserve_host" type="checkbox" normalize={v => !!v} />
                        <FormInput component="input" label="Strip Path" attachTo="proxy.strip_path" type="checkbox" normalize={v => !!v} />
                        <FormInput component="input" label="Append Path" attachTo="proxy.append_path" type="checkbox" normalize={v => !!v} />
                    </FormRow>
                    <Section>
                        <FormRow>
                            <FormLabel text="Health check" />
                        </FormRow>
                        <FormRow>
                            <FormInput component="input" label="url" attachTo="health_check.url" type="text" />
                            <FormInput component="input" label="timeout" attachTo="health_check.timeout" type="text" parse={parse} />
                        </FormRow>
                    </Section>


                    {
                        !!initialValues.plugins &&
                            <RenderPlugins plugins={initialValues.plugins} />
                    }

                </div>
            </Section>
        </form>
    );
};

ApiForm.propTypes = propTypes;

const form = reduxForm({
    form: 'apiForm',
    enableReinitialize: true, // this is needed!!
})(ApiForm);

export default connect(
    state => ({
        initialValues: state.apiReducer.api,
    }),
    null,
)(form);

@@ -1210,22 +1210,26 @@
         
-Submit
+Create API
 %0A       
@@ -1270,32 +1270,51 @@
      %3C/Row%3E%0A    
+        %3C/Section%3E%0A
             %3Cdiv
@@ -1346,36 +1346,32 @@
                 
-    
 %3CFormRow%3E%0A      
@@ -1356,36 +1356,32 @@
       %3CFormRow%3E%0A
-    
                 
@@ -1520,36 +1520,32 @@
                 
-    
 %3C/FormRow%3E%0A     
@@ -1531,36 +1531,32 @@
      %3C/FormRow%3E%0A
-    
                 
@@ -1577,36 +1577,32 @@
                 
-    
 %3CFormInput compo
@@ -1712,36 +1712,32 @@
                 
-    
 %3CFormInput compo
@@ -1827,36 +1827,32 @@
                 
- 
-   
 %3CFormInput compo
@@ -1969,36 +1969,32 @@
                 
-    
 %3CFormInput compo
@@ -2105,36 +2105,32 @@
                 
- 
-   
 %3CFormInput compo
@@ -2239,36 +2239,32 @@
                 
-    
 %3C/FormRow%3E%0A     
@@ -2250,36 +2250,32 @@
      %3C/FormRow%3E%0A
-    
                 
@@ -2296,36 +2296,32 @@
                 
-    
 %3CFormRow%3E%0A      
@@ -2334,28 +2334,24 @@
             
-  
-  
 %3CFormLabel t
@@ -2384,36 +2384,32 @@
                 
-    
 %3C/FormRow%3E%0A     
@@ -2415,36 +2415,32 @@
                 
-   
- 
 %3CFormRow%3E%0A      
@@ -2425,36 +2425,32 @@
       %3CFormRow%3E%0A
-    
                 
@@ -2533,36 +2533,32 @@
  type=%22text%22 /%3E%0A
-    
                 
@@ -2683,36 +2683,32 @@
                 
-    
 %3C/FormRow%3E%0A     
@@ -2694,36 +2694,32 @@
      %3C/FormRow%3E%0A
-    
                 
@@ -2751,18 +2751,10 @@
     
- 
-   %7B%0A    
+%7B%0A
     
@@ -2820,20 +2820,16 @@
         
- 
-   
 %3CRenderP
@@ -2890,19 +2890,11 @@
     
-    %7D%0A%0A    
+%7D%0A%0A
     
@@ -2908,39 +2908,16 @@
  %3C/div%3E%0A
-            %3C/Section%3E%0A
         

fix top part section alignment