import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';
import {Alert, Icon, Spin, Row, Col, message, Button} from 'antd';
import {
    SHOW_APIGROUP, UPDATE_APIGROUP
} from "../../../gql";
import copy from 'copy-to-clipboard';
import axios from 'axios';
import QRCode from 'qrcode.react';
import {Query, Mutation} from "react-apollo";
import gql from "graphql-tag";

axios.defaults.withCredentials = true;

class TencentDeploy extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userID: props.userID,
            url: props.url
        }
    }

    render() {
        let {userID, url} = this.state;
        return (
            <Query query={gql(SHOW_APIGROUP)} variables={{user_id: userID, status: ''}}>
                {
                    ({loading, error, data}) => {
                        if (loading) {
                            return <Spin className='login-nickname'/>
                        }
                        if (error) {
                            return 'error!';
                        }
                        let allDeployed = data.apiGWGroupbyprops;
                        let deployed = allDeployed.filter(deployed =>
                            deployed.cloud_id.cloudName === 'tencent'
                        );
                        return (
                            <TencentDeployRender
                                deployed={deployed}
                                url={url}
                                userID={userID}
                            />
                        )
                    }
                }
            </Query>
        )
    }
}

class TencentDeployRender extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userID: props.userID,
            url: props.url
        }
    }

    render() {
        let {userID, url} = this.state;
        let {deployed} = this.props;
        let regexp = new RegExp(userID + '_');
        return (
            <div>
                {
                    userID === '' && !!url ?
                        <Alert
                            message="WARNING"
                            description="it will be deleted soon, please login to deploy in your owm account"
                            type="warning"
                        />
                        : ''
                }

                {
                    !!url ?
                        <div>
                            <div className={'schema-name'}><FormattedMessage id='new'/></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'}>{url} </span>
                                        <Icon type="copy" theme="twoTone" onClick={() => {
                                            copy(url);
                                            message.success('复制成功.');
                                        }}/>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                        :
                        ''
                }

                {
                    userID === '' ?
                        <div style={{marginTop: 50}}>
                            <FormattedMessage id='go to deploy,then see more'/>
                        </div>

                        :
                        <div>
                            <div className={'schema-name'}><FormattedMessage id='service manage'/></div>
                            <div className={'schema-table-list-title'}>
                                <Row>
                                    <Col span={4}><span className={'schema-table-title'}><FormattedMessage
                                        id='groupName'/></span></Col>
                                    <Col span={10}><span className={'schema-table-title'}><FormattedMessage
                                        id='defaultDomain'/></span></Col>
                                    <Col span={6}><span className={'schema-table-title'}><FormattedMessage
                                        id='qrcode'/></span></Col>
                                    <Col span={4}><span className={'schema-table-title'}><FormattedMessage
                                        id='operation'/></span></Col>
                                </Row>
                            </div>

                            <div className={'schema-table-list-content'}>
                                {
                                    deployed.map(deploy => (
                                        <Row key={deploy.id}>
                                            <Col span={4}>
                                                <span
                                                    className={'schema-table-content'}>{deploy.groupName.replace(regexp, '')}</span>
                                            </Col>
                                            <Col span={10}>
                                                <span
                                                    className={'schema-table-content'}>{`http://${deploy.defaultDomain}/test/`} </span>
                                                <Icon type="copy" theme="twoTone" onClick={() => {
                                                    copy(`http://${deploy.defaultDomain}/test/`);
                                                    message.success('复制成功.');
                                                }}/>
                                            </Col>
                                            <Col span={6}>
                                                <QRCode
                                                    value={deploy.userDomain ? `http://${deploy.userDomain}` : `http://${deploy.defaultDomain}/test/`}
                                                    size={128}
                                                    includeMargin={true}
                                                />
                                            </Col>
                                            <Col span={4}>
                                                <DeleteButton
                                                    groupID={deploy.id}
                                                    userID={userID}
                                                />
                                            </Col>
                                        </Row>
                                    ))
                                }
                                {
                                    deployed.length === 0 ?
                                        <Row>
                                            <Col span={15} offset={5}>
                                                        <span className={'schema-table-content'}><FormattedMessage
                                                            id='nothing'/> </span>
                                            </Col>
                                        </Row> :
                                        ''
                                }
                            </div>


                        </div>

                }
            </div>
        )
    }
}

export default TencentDeploy;

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

    render() {
        let {groupID, userID} = this.props;
        return (
            <Mutation
                mutation={gql(UPDATE_APIGROUP)}
                refetchQueries={[{query: gql(SHOW_APIGROUP), variables: {user_id: userID, status: ''}}]}
            >
                {(update_apiGWGroup, {loading, error}) => {
                    if (loading)
                        return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
                    if (error)
                        return 'error';
                    let varObj = {
                        id: groupID,
                        status: 'deleted',
                        updatedAt: new Date().getTime()
                    };
                    console.log(varObj);
                    return (
                        <Button type={'danger'} size={'small'} style={{marginTop: 10}} onClick={() => {
                            update_apiGWGroup({variables: varObj})
                        }}><FormattedMessage id='delete'/></Button>
                    )
                }}
            </Mutation>
        )
    }
}