import React from 'react';
import PropTypes from 'prop-types';
import { Field } from 'redux-form';
import R from 'ramda';
// import Select from 'react-select';
import Select from '../../../selects/SimpleSelect/SimpleSelect';

import SETUP from '../setup.config';
import block from '../../../../helpers/bem-cn';

import Row from '../../../Layout/Row/Row';
import Label from '../../../labels/Label';
import Input from '../../../inputs/Input';
import Radio from '../../../inputs/Radio/Radio';
import Hint from '../../../labels/Hint/Hint';
import ControlBar from '../ControlBar/ControlBar';
import MultiSelect from '../../../selects/MultiSelect/MultiSelect';
import SimpleSelect from '../../../selects/SimpleSelect/SimpleSelect';
// import Select from '../../../selects/SelectPlugin/SelectPlugin';

const propTypes = {
    className: PropTypes.string,
    name: PropTypes.string.isRequired,
    plugin: PropTypes.object.isRequired,
    pluginName: PropTypes.string.isRequired,
    handlePluginExclude: PropTypes.func.isRequired,
};

const RateLimitPlugin = ({ className, name, handlePluginExclude, plugin, pluginName }) => {
    const b = block(className);
    const optionsTransformer = config => config.map(item => ({
        label: item,
        value: item,
    }));

    console.error('HERE', optionsTransformer(plugin.config.policy));

    return (
        <div className={b('section')()}>
            <Row fullwidth>
                <Row col>
                    <Label>Plugin Name</Label>
                    <Input input={{value: 'Rate Limit'}} disabled />
                </Row>
                <ControlBar name={`${name}.enabled`} removePlugin={() => handlePluginExclude(pluginName)} />
            </Row>
            <Row className={b('row')()} fullwidth>
                <Row col>
                    <Row>
                        <Row col>
                            <Label>Limit Value</Label>
                            <Field
                                type="number"
                                name={`${name}.config.limit.value`}
                                placeholder=""
                                component={Input}
                            />
                        </Row>
                        <Row col>
                            <Label>Limit Unit</Label>
                            <Field
                                name={`${name}.config.limit.units`}
                                type="text"
                                options={optionsTransformer(plugin.config.limit.units)}
                                component={Select}
                            />
                        </Row>
                    </Row>
                    <Hint>The maximum number of requests that the Gateway will forward to the upstream_path.</Hint>
                </Row>
                <Row col>
                    <Label>Policy</Label>
                    <Field
                        name={`${name}.config.policy`}
                        type="text"
                        options={plugin.config.policy}
                        component={Select}
                    />
                    <Hint>The type of rate-limiting policy used for retrieving and incrementing the limits.</Hint>
                </Row>
            </Row>
        </div>
    );
};

RateLimitPlugin.propTypes = propTypes;

export default RateLimitPlugin;

@@ -118,111 +118,8 @@
 da';
-%0A// import Select from 'react-select';%0Aimport Select from '../../../selects/SimpleSelect/SimpleSelect';
 %0A%0Aim
@@ -619,76 +619,8 @@
 ct';
-%0A// import Select from '../../../selects/SelectPlugin/SelectPlugin';
 %0A%0Aco
@@ -2393,32 +2393,38 @@
      component=%7B
+Simple
 Select%7D%0A        
@@ -2919,16 +2919,22 @@
 ponent=%7B
+Simple
 Select%7D%0A

remove redundant stuff