import React, {Component} from 'react';
import {Card} from 'antd';

import TencentConfig from './tencent/TencentConfig';
import AliConfig from './ali/AliConfig';
import AmazonConfig from './amazon/AmazonConfig';
import HuaweiConfig from './huawei/HuaweiConfig';

import './index.css';

const tabListNoTitle = [{
    key: 'tencent',
    tab: 'Tencent',
}, {
    key: 'aliyun',
    tab: 'Aliyun',
}, {
    key: 'amazon',
    tab: 'AWS',
}];

const contentListNoTitle = {
    tencent: <TencentConfig/>,
    aliyun: <AliConfig/>,
    amazon: <AmazonConfig/>,
};


class Deploy extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cloud: 'tencent',
        };
    }

    render() {
        let userID = this.props.userID;
        return (
            <div>
                <div>
                    <Card
                        style={{width: '100%'}}
                        tabList={tabListNoTitle}
                        activeTabKey={this.state.cloud}
                        onTabChange={(cloud) => {
                            this.setState({
                                cloud
                            })
                        }}
                    >
                        {contentListNoTitle[this.state.cloud]}
                    </Card>
                </div>
            </div>
        )
    }
}

export default Deploy;