import React, { Component } from 'react';
import PropTypes from 'prop-types';
import R from 'ramda';
import { deleteProperty } from 'picklock';

import transformFormValues from '../../../helpers/transformFormValues';

import Subtitle from '../../Layout/Title/Subtitle';
import NewApiForm from './NewApiForm';
import EditApiForm from '../EditPage/EditApiForm';
import Preloader from '../../Preloader/Preloader';

const propTypes = {
    api: PropTypes.object.isRequired,
    fetchEndpointSchema: PropTypes.func.isRequired,
    resetEndpoint: PropTypes.func.isRequired,
    saveEndpoint: PropTypes.func.isRequired,
    excludePlugin: PropTypes.func.isRequired,
    selectPlugin: PropTypes.func.isRequired,
    selectedPlugins: PropTypes.arrayOf(PropTypes.string).isRequired,
    location: PropTypes.object.isRequired,
    willClone: PropTypes.func.isRequired,
};

class NewApiItem extends Component {
    componentDidMount() {
        this.props.resetEndpoint();

        if (this.hasToBeCloned()) {
            this.props.fetchEndpointSchema();
            this.props.willClone(deleteProperty(this.props.location.state.clone, 'name'));
            return;
        }

        this.props.fetchEndpointSchema(true);
    }

    handleDelete = apiName => {
        this.props.deleteEndpoint(apiName, this.props.refreshEndpoints);
    };

    submit = values => {
        const transformedValues = transformFormValues(values, true);
        const plugins = transformedValues.plugins;
        const selectedPlugins = this.props.selectedPlugins;
        const addedPlugins = plugins.filter((plugin) => {
            return selectedPlugins.indexOf(plugin.name) !== -1;
        });
        const computedPlugins = {
            ...transformedValues,
            plugins: addedPlugins,
        };

        this.props.saveEndpoint(this.props.location.pathname, computedPlugins);
    }

    hasToBeCloned = () => {
        if (this.props.location.state && !R.isEmpty(this.props.location.state.clone)) {
            return {
                clone: this.props.location.state.clone,
            };
        }

        return false;
    }

    renderForm = () => {
        if (R.isEmpty(this.props.apiSchema)) return <Preloader />;

        if (this.hasToBeCloned() && !R.isEmpty(this.props.api)) {
            const api = this.props.api;
            const apiPlugins = api.plugins;
            const defaultPlugins = this.props.apiSchema.plugins;
            const updatedPlugins = defaultPlugins.map(item => {
                const res = apiPlugins.filter(pl => pl.name === item.name);

                return res.length > 0 ? res[0] : item;
            });
            const lens = R.lensPath(['plugins']);
            // substitude the plugin.config.limit
            const updatedApi = R.set(lens, updatedPlugins, api);

            return (
                <EditApiForm
                    api={this.props.api}
                    apiSchema={this.props.apiSchema}
                    disabled={false}
                    excludePlugin={this.props.excludePlugin}
                    handleDelete={this.handleDelete}
                    initialValues={transformFormValues(updatedApi)}
                    onSubmit={this.submit}
                    selectedPlugins={this.props.selectedPlugins}
                    selectPlugin={this.props.selectPlugin}
                />
            );
        }

        return (
            <NewApiForm
                //api
                apiSchema={this.props.apiSchema}
                //disabled
                excludePlugin={this.props.excludePlugin}
                //handleDelete
                initialValues={transformFormValues(this.props.apiSchema)}
                onSubmit={this.submit}
                selectPlugin={this.props.selectPlugin}
                selectedPlugins={this.props.selectedPlugins}
            />
        );
    }

    render() {
        return (
            <div>
                <Subtitle>{this.props.api.name}</Subtitle>
                { this.renderForm() }
            </div>
        );
    }
}

NewApiItem.propTypes = propTypes;

export default NewApiItem;

@@ -2219,66 +2219,205 @@
     
-if (this.hasToBeCloned() && !R.isEmpty(this.props.api)) %7B%0A
+// const addAditionalProps = () =%3E %7B%7D;%0A        const isCloning = () =%3E this.hasToBeCloned() && !R.isEmpty(this.props.api);%0A%0A        if (isCloning()) %7B%0A            const getUpdatedApi = () =%3E %7B%0A    
     
@@ -2456,32 +2456,36 @@
 pi;%0A            
+  
+  
 const apiPlugins
@@ -2492,32 +2492,36 @@
  = api.plugins;%0A
+    
             cons
@@ -2573,32 +2573,36 @@
 ns;%0A            
+ 
+   
 const updatedPlu
@@ -2633,24 +2633,28 @@
 p(item =%3E %7B%0A
+    
             
@@ -2730,24 +2730,28 @@
             
+    
 return res.l
@@ -2781,36 +2781,44 @@
 em;%0A            
+   
+ 
 %7D);%0A
+    
             cons
@@ -2863,16 +2863,20 @@
         
+  
+  
 // subst
@@ -2905,16 +2905,20 @@
 g.limit%0A
+    
         
@@ -2971,24 +2971,75 @@
 ins, api);%0A%0A
+                return updatedApi;%0A            %7D;%0A%0A
             
@@ -3376,17 +3376,20 @@
 mValues(
-u
+getU
 pdatedAp
@@ -3389,16 +3389,18 @@
 datedApi
+()
 )%7D%0A     

split on functions