import React, {Component} from 'react';
import {Row, Col, Card, Button} from 'antd';
import APIGroupCard from './APIGroupCard';
import APIPathCard from './APIPathCard';
import DeployCard from './DeployCard';

import {SHOW_DEPLOY, SHOW_APIGWGROUP, SHOW_APIGWPATH} from "../../../gql";
import {request} from 'graphql-request'

class TencentConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {
            region: 'beijing',
            deploys: [],
            currentDeploy: '',
            groups: [],
            currentGroup: '',
            paths: [],
            currentPath: ''
        };

        // todo: 没做每个 deploy 和 apigroup 和 apipath 的切换
        // todo: 换成 apollo 会更好
        if (props.cloudID !== '') {
            request('http://123.206.193.98:3000/graphql', SHOW_DEPLOY, {cloud_id: props.cloudID}).then(
                data => {
                    this.setState({
                        deploys: data.deploy_by_props,
                        currentDeploy: data.deploy_by_props[0]
                    })
                }
            );
            request('http://123.206.193.98:3000/graphql', SHOW_APIGWGROUP, {cloud_id: props.cloudID}).then(
                data => {
                    this.setState({
                        groups: data.apiGWGroup_by_props,
                        currentGroup: data.apiGWGroup_by_props[0]
                    }, () => {
                        request('http://123.206.193.98:3000/graphql', SHOW_APIGWPATH, {apiGWGroup_id: this.state.currentGroup.id}).then(
                            data => {
                                this.setState({
                                    paths: data.apiGWPath_by_props,
                                    currentPath: data.apiGWPath_by_props[0]
                                });
                            }
                        );
                    });
                }
            );
        }
    }

    switchRegion = (e) => {
        this.setState({
            region: e.target.value
        });
    };

    render() {
        return (
            <div>
                <div style={{padding: '30px'}}>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Card title="Deploy" style={{marginBottom: 10}}><DeployCard deploy={this.state.currentDeploy} switchRegion={this.switchRegion} region={this.state.region} schemaName={this.props.schemaName}/></Card>
                            <Card title="API Group" style={{marginBottom: 10}}><APIGroupCard group={this.state.currentGroup} switchRegion={this.switchRegion} region={this.state.region}/></Card>
                            <Card title="API Path"><APIPathCard path={this.state.currentPath} schemaName={this.props.schemaName}/></Card>
                        </Col>
                        <Col offset={2} span={8}>
                            <Button type='primary'>deploy it</Button>
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }
}

export default TencentConfig;