import React, {Component} from 'react';

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

const Option = Select.Option;

class TencentConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {
            configs: ['functionName', 'region', 'description', 'cosBucketName', 'cosObjectName', 'cosBucketRegion', 'vpcId', 'subnetId'],
            functionName: props.deploy.functionName,
            region: props.deploy.region,
            description: props.deploy.description,
            cosBucketName: props.deploy.cosBucketName,
            cosObjectName: props.deploy.cosObjectName,
            cosBucketRegion: props.deploy.cosBucketRegion,
            vpcId: props.deploy.vpcId,
            subnetId: props.deploy.subnetId
        };
    }

    switchCS = (value) => {
        this.setState({
            cloudServer: value
        })
    };

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

    switchDataBase = (value) => {
        this.setState({
            database: value
        })
    };

    componentWillReceiveProps(next) {
        this.setState({
            functionName: next.deploy.functionName,
            region: next.deploy.region,
            description: next.deploy.description,
            cosBucketName: next.deploy.cosBucketName,
            cosObjectName: next.deploy.cosObjectName,
            cosBucketRegion: next.deploy.cosBucketRegion,
            vpcId: next.deploy.vpcId,
            subnetId: next.deploy.subnetId
        });
    };

    render() {
        return (
            <div style={{margin: 20}}>


                <div onClick={this.props.reDisplayChoose} style={{marginBottom: 30}}> back to choose</div>
                <div>
                    <span className='table-title'> Cloud Config</span>


                    {/*<p><b>Other configs</b></p>*/}
                    {
                        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 TencentConfig;