import React, {Component} from 'react';
import {Layout, Button, notification, Row, Col, Icon, message, Radio} from 'antd';
import {getCookie} from "../../../cookie";
import {graphqlUrl} from "../../../config";
import {SEARCH_APIGROUP} from "../../../gql";
import {request} from 'graphql-request'
import {FormattedMessage} from 'react-intl';
import copy from 'copy-to-clipboard';
import UserCustom from './UserCustom';

const {Content} = Layout;

class ExampleDetail extends Component {
    constructor() {
        super();
        this.state = {
            userID: '',
            bucketName: '',
            domain: '',
            showCustom: false
        };
    }

    componentWillMount() {
        this._isMounted = true;

        // 查询是否登录
        let userID = getCookie('user_id');
        if (userID !== undefined && userID !== '') {
            this.setState({
                userID
            });
        }

        // 查询跳转来的案例，转成 apigroup id
        let groupID = '';
        if (this.props.location && this.props.location.state) {
            switch (this.props.location.state.schemaID) {
                case 'order_schemaID':
                    this.setState({
                        bucketName: 'appointment'
                    });
                    groupID = 'order';
                    break;
                case 'ecommerce_schemaID':
                    this.setState({
                        bucketName: 'e-commerce'
                    });
                    groupID = 'ecommerce';
                    break;
                case 'bills_schemaID':
                    this.setState({
                        bucketName: 'bills'
                    });
                    groupID = 'bills';
                    break;
                default:
                    break;
            }
        }

        // 查询该案例的 domain
        request(graphqlUrl, SEARCH_APIGROUP, {id: groupID}).then(res => {
            let caseDeploy = res.apiGWGroupbyid;
            let domain = caseDeploy.defaultDomain;
            if (this._isMounted) {
                this.setState({
                    domain
                })
            }
        })
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    backToMe = () => {
        this.setState({
            showCustom: false
        })
    };

    render() {
        let {userID, bucketName, domain, showCustom} = this.state;
        return (
            <div className={'deploy-choose-cloud'}>
                <Layout style={{padding: '24px', minHeight: '300px'}}>
                    <Content style={{padding: '20px 50px', background: '#fff'}}>
                        {
                            !showCustom ?
                                <div>
                                    <div>
                                        <div className={'schema-name'}><FormattedMessage id='case graphql domain'/>
                                        </div>
                                        <div className={'schema-table-list-title'}>
                                            <Row>
                                                <Col span={15}><span className={'schema-table-title'}><FormattedMessage
                                                    id='defaultDomain'/></span></Col>
                                            </Row>
                                        </div>
                                        <div className={'schema-table-list-content'}>
                                            <Row>
                                                <Col span={15}>
                                                    <span className={'schema-table-content'}>{domain} </span>
                                                    <Icon type="copy" theme="twoTone" onClick={() => {
                                                        copy(domain);
                                                        message.success('复制成功.');
                                                    }}/>
                                                </Col>
                                            </Row>
                                        </div>
                                    </div>


                                    <div style={{marginTop: 20, fontSize: 20}}>
                                        <div className={'schema-name'}><FormattedMessage id='detail'/></div>
                                        这里巴拉巴拉
                                    </div>


                                    <div style={{marginTop: 20}}>
                                        <div className={'choose-cloud-button-group'}>
                                            <Button className={'choose-cloud-button'} type='primary' onClick={() => {
                                                if (userID === '') {
                                                    notification['warning']({
                                                        message: '需要登录',
                                                        description: '后续使用，需要先登录',
                                                    });

                                                    this.props.history.push({
                                                        pathname: `/login`
                                                    })
                                                } else {
                                                    this.setState({
                                                        showCustom: true
                                                    })
                                                }
                                            }}>自定义参数设置</Button>
                                        </div>
                                    </div>
                                </div>
                                :
                                <UserCustom
                                    userID={userID}
                                    bucketName={bucketName}
                                    history={this.props.history}
                                    backToMe={this.backToMe}
                                />
                        }
                    </Content>
                </Layout>
            </div>
        )
    }
}

export default ExampleDetail