import React, {Component} from 'react';
import {Spin} from 'antd';
import {GET_PROJECT} from "../../../../../gql";
import {Query} from "react-apollo";
import gql from "graphql-tag";
import APIGroupCardRender from "./APIGroupCardRender";
import {removeSpace} from "../../../../../func";

class APIGroupCardFetch extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

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

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

                        let dataProject = data.project_by_id;
                        let {cloud_id, apiGWGroup_id, projectName} = dataProject;

                        if (cloud_id !== null && cloud_id.cloudName === 'tencent') {
                            group = apiGWGroup_id;
                            cloudID = cloud_id.id;
                        }

                        return (
                            <APIGroupCardRender
                                // props
                                switchRegion={this.props.switchRegion}
                                region={this.props.region}
                                trialcase={this.props.trialcase}
                                pass={this.props.pass}
                                stepByStep={this.props.stepByStep}
                                userID={this.props.userID}
                                projectID={this.props.projectID}

                                // this
                                switchConfig={this.switchConfig}
                                ok={this.ok}

                                // query
                                defalutName={removeSpace(projectName)}
                                group={group}
                                cloudID={cloudID}
                            />
                        )
                    }
                }
            </Query>

        )
    }
}

export default APIGroupCardFetch;