import React, {Component} from 'react';
import {withRouter} from "react-router-dom";
import {Modal, Row, Col, Input, Icon, Button, Spin} from 'antd';

import {Mutation, Query} from "react-apollo";
import gql from "graphql-tag";

import {ADD_WXCONFIG,ADD_PROJECT_AND_WX, SHOW_PROJECT,SHOW_WXCONFIG} from '../../../gql'
import './index.css';
import {getCookie} from "../../../cookie";
import {idGen} from "../../../func";

class WxCreate extends Component {
    constructor(props) {
        super(props);
        this.state = {
            appName: '',
            configID: '',
            visible: false,
            confirmLoading: false,
            mch_id: '',
            notify_url: '',
            appSecret: '',
            appID: '',
            token: '',
            spbill_create_ip: '',
            enter_url: '',
            pay_api_key: '',
            body: '',
            welcome_words: '',
            attach: ''
        };
    }

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

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

    handleOk = (userID, create_project_and_wxConfig) => {
        let {mch_id, notify_url, appSecret, appID, token, spbill_create_ip, enter_url, pay_api_key, body, welcome_words, attach} = this.state;
        let wxConfigId = idGen('wxConfig');
        let projectId= idGen('project');
        let appName = this.state.appName;
        let createdAt = new Date().getTime();

        let wxConfigVarObj = {
            wxConfigId,
            appName,
            user_id: userID,
            wxCreatedAt: createdAt,
            wxUpdatedAt: '',
            mch_id,
            notify_url,
            appSecret,
            appID,
            token,
            spbill_create_ip,
            enter_url,
            pay_api_key,
            body,
            welcome_words,
            attach
        };
        let projectVarObj = {
            projectCreatedAt: createdAt,
            projectUpdatedAt: '',
            database_id: '',
            apiGWGroup_id: '',
            projectName: appName,
            deploy_id: '',
            projectId,
            projectType: 'wx',
            cloud_id: '',
            user_id: userID,
            wxConfig_id: wxConfigId,
            schema_id: '',
            projectStatus: 'created'
        };

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

        create_project_and_wxConfig({
            variables: {
                ...wxConfigVarObj,
                ...projectVarObj
            },
            refetchQueries:[{query: gql(SHOW_PROJECT), variables: {projectType:'wx',user_id: userID}}]
        });

        setTimeout(() => {
            this.setState({
                visible: false,
                confirmLoading: false,
            });
        }, 1000);

        this.props.hideModal();
        this.props.switchSidebar(appName);
        this.props.history.push({
            pathname: `/wechat-service/my-create/${appName}`,
            state: {
                appName,
                configID: wxConfigId,
                create: true
            }
        });
    };

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

        return (
            <div>
                <Mutation
                    mutation={gql(ADD_PROJECT_AND_WX)}
                >
                    {(create_project_and_wxConfig, {loading, error}) => {
                        if (loading)
                            return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
                        if (error)
                            return 'error';
                        return (
                            <Modal title="Create Wechat Service"
                                   centered
                                   visible={visible}
                                   onOk={() => this.handleOk(userID, create_project_and_wxConfig)}
                                   confirmLoading={confirmLoading}
                                   onCancel={() => {
                                       this.props.hideModal();
                                   }}
                            >
                                <div>
                                    <p>app name</p>
                                    <Input
                                        className='add-input'
                                        placeholder="input app_name"
                                        onChange={e => {
                                            e.persist();
                                            this.setState({
                                                appName: e.target.value,
                                            });
                                            if(userID === '' || undefined) {
                                                this.redirectToLogin();
                                                this.props.hideModal();
                                            }
                                        }}
                                    />
                                </div>
                            </Modal>
                        )
                    }}
                </Mutation>
            </div>
        )
    }
}

export default withRouter(WxCreate);