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 NotificationCard from './NotificationCard';

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: '',
            deployIdPassToPath: '',
            groupIdPassToPath: '',
            cloudID: props.cloudID,
            fc: props.fc
        };
        this.fetch();
    }


    componentWillReceiveProps(next) {
        this.setState({
            fc: next.fc,
            cloudID: next.cloudID
        }, this.fetch);
    }

    fetch = () => {
        // todo: 没做每个 deploy 和 apigroup 和 apipath 的切换
        // todo: 换成 apollo 会更好
        if (this.state.fc === true) {
            request('http://123.206.193.98:3000/graphql', SHOW_DEPLOY, {cloud_id: this.state.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: this.state.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]
                                });
                            }
                        );
                    });
                }
            );
        } else {
            this.setState({
                currentDeploy: '',
                currentGroup: '',
                currentPath: '',
            })
        }
    };

    pass = (value, kind) => {
        if(kind === 'deploy')
            this.setState({
                deployIdPassToPath: value
            });
        else
            this.setState({
                groupIdPassToPath: value
            })
    };

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

    render() {
        return (
            <div>
                <div style={{padding: '30px'}}>
                    <Row gutter={16}>
                        <Col span={14}>
                            <Card title="Deploy" style={{marginBottom: 10}}><DeployCard deploy={this.state.currentDeploy} switchRegion={this.switchRegion} region={this.state.region} schemaName={this.props.schemaName} userID={this.props.userID} cloudID={this.props.cloudID} pass={this.pass}/></Card>
                            <Card title="API Group" style={{marginBottom: 10}}><APIGroupCard group={this.state.currentGroup} switchRegion={this.switchRegion} region={this.state.region} userID={this.props.userID} cloudID={this.props.cloudID} pass={this.pass}/></Card>
                            <Card title="API Path" style={{marginBottom: 10}}><APIPathCard path={this.state.currentPath} schemaName={this.props.schemaName} userID={this.props.userID} deployID={this.state.currentDeploy? this.state.currentDeploy.id : this.state.deployIdPassToPath} groupID={this.state.currentGroup? this.state.currentGroup.id : this.state.groupIdPassToPath}/></Card>
                            <Card title="Notification"><NotificationCard userID={this.props.userID}/></Card>
                        </Col>
                        <Col offset={2} span={6}>
                            <Button type='primary'>deploy it</Button>
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }
}

export default TencentConfig;