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

import {SHOW_APIGWPATH, GET_PROJECT} from "../../../../gql";
import {deployUrl} from "../../../../config";
import {FormattedMessage} from 'react-intl';
import gql from "graphql-tag";
import {Query} from "react-apollo";

class TencentConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {
            region: '',
            couldDeploy: false,
            deployIdPassToPath: '',
            groupIdPassToPath: ''
        };
    }

    componentWillReceiveProps(next) {
        this.setState({
            couldDeploy: false,
            region: '',
            deployIdPassToPath: '',
            groupIdPassToPath: ''
        });
    }


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

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

    deployFC = () => {
        let _this = this;

        axios.get(`${deployUrl}`,
            // axios.get(`http://localhost:8999/graphql/deployall`,
            {
                params: {
                    'cloud-name': 'tencent',
                    schema: "ecommerce_schemaID",
                    deploy: "deploy_1544504304478_57468453",
                    api: "path_1544504334478_82625598",
                    group: "group_1544504325443_46750115"
                }
            })
            .then((res) => {
                console.log('deploy res', res);
            })
            .catch((err) => {
                console.log('err', err);
                console.log('err.response', err.response);
                console.log('err.response.data', err.response.data);
            });
    };

    render() {
        let projectID = this.props.projectID ? this.props.projectID : 'ecommerce_projectID';

        return (
            <Query query={gql(GET_PROJECT)} variables={{id: projectID}}>
                {
                    ({loading, error, data}) => {
                        if (loading) {
                            return <Spin style={{marginLeft: 3}}/>
                        }
                        if (error) {
                            return 'error!';
                        }

                        let group = '',
                            deploy = '',
                            path = '',
                            cloudID = 'tencent_CloudID';

                        if (data.project_by_id.cloud_id !== null && data.project_by_id.cloud_id.cloudName === 'tencent') {
                            group = data.project_by_id.apiGWGroup_id;
                            deploy = data.project_by_id.deploy_id;
                            cloudID = data.project_by_id.cloud_id.id;
                        }
                        let defaultName = data.project_by_id.projectName;
                        return (
                            <div>
                                {
                                    data.project_by_id.schema_id.schemaState === 'ok' ?
                                        ''
                                        :
                                        this.props.trialcase?
                                            ''
                                            :
                                            <div style={{marginBottom: 10}}>
                                                <Alert message="数据表结构不符合规范，暂不能部署，请修改" type="warning"
                                                       banner closable/>
                                            </div>
                                }
                                <div style={{padding: '30px'}}>
                                    <Row gutter={16}>
                                        <Col span={14}>


                                            <FormattedMessage id="fc Deploy">
                                                {
                                                    msg =>
                                                        <Card title={msg} style={{marginBottom: 10}}>
                                                            <DeployCard
                                                                deploy={deploy}
                                                                switchRegion={this.switchRegion}
                                                                region={this.state.region}
                                                                defalutName={defaultName}
                                                                userID={this.props.userID}
                                                                cloudID={cloudID}
                                                                trialcase={this.props.trialcase}
                                                                pass={this.pass}
                                                            />
                                                        </Card>
                                                }
                                            </FormattedMessage>
                                            <FormattedMessage id="API Group">
                                                {
                                                    msg =>
                                                        <Card title={msg} style={{marginBottom: 10}}>
                                                            <APIGroupCard
                                                                group={group}
                                                                userID={this.props.userID}
                                                                switchRegion={this.switchRegion}
                                                                region={this.state.region}
                                                                cloudID={cloudID}
                                                                trialcase={this.props.trialcase}
                                                                pass={this.pass}
                                                            />
                                                        </Card>
                                                }
                                            </FormattedMessage>
                                            <Query query={gql(SHOW_APIGWPATH)}
                                                   variables={{apiGWGroup_id: data.project_by_id.apiGWGroup_id ? data.project_by_id.apiGWGroup_id.id : ''}}>
                                                {
                                                    ({loading, error, data}) => {
                                                        if (loading) {
                                                            return <Spin style={{marginLeft: 3}}/>
                                                        }
                                                        if (error) {
                                                            return 'error!';
                                                        }
                                                        if (data.apiGWPath_by_props.length > 0)
                                                            path = data.apiGWPath_by_props[0];
                                                        return (
                                                            <FormattedMessage id="API Path">
                                                                {
                                                                    msg =>
                                                                        <Card title={msg} style={{marginBottom: 10}}>
                                                                            <APIPathCard
                                                                                path={path}
                                                                                defalutName={defaultName}
                                                                                userID={this.props.userID}
                                                                                trialcase={this.props.trialcase}
                                                                                deployID={deploy ? deploy.id : this.state.deployIdPassToPath}
                                                                                groupID={group ? group.id : this.state.groupIdPassToPath}
                                                                            />
                                                                        </Card>
                                                                }
                                                            </FormattedMessage>
                                                        )
                                                    }
                                                }
                                            </Query>
                                            <FormattedMessage id="Notification">
                                                {
                                                    msg =>
                                                        <Card title={msg}>
                                                            <NotificationCard
                                                                userID={this.props.userID}
                                                                trialcase={this.props.trialcase}
                                                            />
                                                        </Card>
                                                }
                                            </FormattedMessage>
                                        </Col>
                                        <Col offset={2} span={6}>
                                            <Button type='primary'
                                                    disabled={data.project_by_id.schema_id.schemaState === 'ok' ? '' : 'disabled'}
                                                    onClick={() => this.deployFC()}><FormattedMessage
                                                id="deploy"/>!</Button>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                        )
                    }
                }
            </Query>

        )
    }
}

export default TencentConfig;