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 {removeSpace} from "../../../../../../func";
import NotificationCardRender from './NotificationCardRender';
import DeployCardRender from "../deployCard/DeployCardRender";

class NotificationCardFetch extends Component {
    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 dataProject = data.project_by_id;
                        let {projectName, projectStatus} = dataProject;

                        let notification = dataProject.notification_id || '';

                        return (
                            <NotificationCardRender
                                // props
                                trialcase={this.props.trialcase}
                                stepByStep={this.props.stepByStep}
                                userID={this.props.userID}
                                projectID={this.props.projectID}
                                stepAllShow={this.props.stepAllShow}

                                // query
                                notification={notification}
                                defaultName={removeSpace(projectName)}
                                projectStatus={projectStatus}
                            />
                        )
                    }
                }
            </Query>

        )

    }
}

export default NotificationCardFetch;