import React, {Component} from 'react';
import {Input, Radio, Collapse, Button} from 'antd';

const Panel = Collapse.Panel;

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

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


    render() {
        const customPanelStyle = {
            background: '#f7f7f7',
            borderRadius: 4,
            marginBottom: 24,
            border: 0,
            overflow: 'hidden',
        };

        return (
            <div>
                <Collapse bordered={false}>
                    <Panel header="Want more options?" style={customPanelStyle}>
                        {
                            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 style={{marginBottom: 10}}>
                            <span className='vice-title'>requestMethod: </span>
                            <Radio.Group onChange={this.switchConfig('requestMethod')} defaultValue="get"
                                         buttonStyle="solid">
                                <Radio.Button value="get">get</Radio.Button>
                                <Radio.Button value="post">post</Radio.Button>
                            </Radio.Group>
                        </div>
                    </Panel>
                </Collapse>
                <Button type='primary'>ok</Button>
            </div>
        )
    }
}

export default APIPathCard;