import React, {Component} from 'react';

import {Input, Select, Button, Row, Col} from 'antd';

const Option = Select.Option;

class TencentAPIPath extends Component {
    constructor(props) {
        super(props);
        this.state = {
            configs: ['apiGWName', 'apiGWDesc', 'requestMethod'],
            apiGWName: props.apiPath.apiGWName,
            apiGWDesc: props.apiPath.apiGWDesc,
            requestMethod: props.apiPath.requestMethod,
        };
    }

    switchConfig = (label) => {
        return (e) => {
            this.setState({
                [label]: e.target.value
            })
        };
    };

    componentWillReceiveProps(next) {
        this.setState({
            apiGWName: next.apiPath.apiGWName,
            apiGWDesc: next.apiPath.apiGWDesc,
            requestMethod: next.apiPath.requestMethod,
        });
    };

    render() {
        return (
            <div style={{margin: 20}}>
                <div onClick={this.props.reDisplayChoosePath} style={{marginBottom: 30}}> back to choose</div>
                <div>
                    {
                        this.state.configs.map(config => (
                            <div key={config} style={{marginBottom: 10}}>
                                <span className='vice-title'>{config}: </span>
                                <Input value={this.state[config]} style={{width: 200}}
                                       onChange={this.switchConfig(config)}/>
                            </div>
                        ))
                    }

                </div>
            </div>
        )
    }
}

export default TencentAPIPath;