import React, {Component} from 'react';
import {withRouter} from "react-router-dom";
import {Modal, Input, notification, Spin} from 'antd';
import {Mutation} from "react-apollo";
import gql from "graphql-tag";
import {ADD_PROJECT_AND_SCHEMA, SHOW_PROJECT} from '../../../../../gql'
import './index.css';
import {getCookie} from "../../../../../cookie";
import {idGen, removeSpace} from "../../../../../func";
import {FormattedMessage} from 'react-intl';

class Create extends Component {
    constructor(props) {
        super(props);
        this.state = {
            schemaName: '',
            schemaID: '',
            visible: false,
            confirmLoading: false,
        };
    }

    redirectToLogin = () => {
        this.props.history.push({
            pathname: `/login`,
        });
    };

    componentWillReceiveProps(nextProps) {
        this.setState({
            visible: nextProps.visible,
        });
    }


    handleOk = (userID, create_project_and_schema) => {
        let schemaId = idGen('schema');
        let projectId = idGen('project');
        let schemaName = this.state.schemaName;
        let createdAt = new Date().getTime();

        let schemaVarObj = {
            schemaId,
            schemaName,
            user_id: userID,
            schemaCreatedAt: createdAt,
            schemaUpdatedAt: '',
            schemaState: 'create',
            schemaData: JSON.stringify([]),
            reference: ''
        };
        let projectVarObj = {
            projectCreatedAt: createdAt,
            projectUpdatedAt: '',
            database_id: '',
            apiGWGroup_id: '',
            projectName: removeSpace(schemaName),
            deploy_id: '',
            case_id: '',
            projectId,
            projectType: 'graphql',
            cloud_id: '',
            user_id: userID,
            wxConfig_id: '',
            schema_id: schemaId,
            projectStatus: 'created'
        };

        this.setState({
            confirmLoading: true,
        });

        create_project_and_schema({
            variables: {...schemaVarObj, ...projectVarObj},
            refetchQueries: [{query: gql(SHOW_PROJECT), variables: {projectType: 'graphql', user_id: userID}}]
        });
        setTimeout(() => {
            this.setState({
                visible: false,
                confirmLoading: false,
            });
        }, 1000);
        this.props.hideModal();
        this.props.switchSidebar(schemaName);
        this.props.history.push({
            pathname: `/graphql-service/my-create/${schemaName}`,
            state: {
                schemaName,
                schemaID: schemaId,
                projectID: projectId,
                create: true
            }
        });
    };

    render() {
        let userID = this.props.userID || getCookie('user_id');
        const {visible, confirmLoading} = this.state;

        return (
            <div>
                <Mutation
                    mutation={gql(ADD_PROJECT_AND_SCHEMA)}
                >
                    {(create_project_and_schema, {loading, error}) => {
                        if (loading)
                            return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
                        if (error)
                            return 'error';
                        return (
                            <FormattedMessage id="Create Graphql Service">
                                {(msg) => (
                                    <Modal title={msg}
                                           centered
                                           visible={visible}
                                           onOk={() => {
                                               if (userID !== '' && userID !== undefined)
                                                   this.handleOk(userID, create_project_and_schema)
                                           }}
                                           confirmLoading={confirmLoading}
                                           onCancel={() => {
                                               this.props.hideModal();
                                           }}
                                    >
                                        <div>
                                            <p><FormattedMessage id="schema name"/></p>
                                            <FormattedMessage id="input schema name">
                                                {(msg) => (
                                                    <Input
                                                        className='add-input'
                                                        placeholder={msg}
                                                        onChange={e => {
                                                            e.persist();
                                                            if (userID === '' || undefined) {
                                                                notification.open({
                                                                    message: '提醒',
                                                                    description: '需要登录.',
                                                                });
                                                                this.redirectToLogin();
                                                                this.props.hideModal();
                                                            } else {
                                                                this.setState({
                                                                    schemaName: e.target.value,
                                                                });
                                                            }
                                                        }}
                                                    />
                                                )}

                                            </FormattedMessage>
                                        </div>
                                    </Modal>
                                )}
                            </FormattedMessage>

                        )
                    }}
                </Mutation>
            </div>
        )
    }
}

export default withRouter(Create);