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

const Panel = Collapse.Panel;

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

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

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

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

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

                        return (
                            <Query query={gql(SHOW_APIGWPATH)} variables={{apiGWGroup_id: group? group.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 (
                                            <APIPathCardRender
                                                // props
                                                trialcase={this.props.trialcase}
                                                stepByStep={this.props.stepByStep}
                                                userID={this.props.userID}
                                                projectID={this.props.projectID}
                                                stepAllShow={this.props.stepAllShow}

                                                // query1
                                                deployID={deploy.id}
                                                groupID={group? group.id : ''}

                                                // query2
                                                defalutName={removeSpace(projectName)}
                                                path={path}
                                            />
                                        )
                                    }
                                }
                            </Query>
                        )
                    }
                }
            </Query>
        )
    }
}

export default APIPathCardFetch;