import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';
import {Input, Radio, Collapse, Button, Icon, Tooltip} from 'antd';
import {request} from 'graphql-request'
import {ADD_APIGWPATH, UPDATE_APIGWPATH} from "../../../../gql";
import {idGen} from "../../../../func";
import {graphqlUrl} from "../../../../config";
import {manageUsers} from "../../../../config";

const Panel = Collapse.Panel;

// 如需改变显示，请在此处 value 处更改
// 如需添加中文，请在此处 value 处添加
// eg: 'xxxx': <F..  id='xxx'/>
const valueToKey = {
    'apiGWName': 'apiGWName',
    'apiGWDesc': 'apiGWDesc',
    'requestMethod': 'requestMethod'
};

const toolTipTitle = {
    'apiGWName': 'its apiGWName',
    'apiGWDesc': 'its apiGWDesc',
    'requestMethod': 'its requestMethod'
};

const youMustFill = {
    'apiGWName': true,
    'apiGWDesc': false,
    'requestMethod': true
};

class APIPathCard extends Component {
    constructor(props) {
        super(props);
        if(props.path !== '' && props.path !== null) {
            let {apiGWName, apiGWDesc, requestMethod} = props.path;
            this.state = {
                configs: ['apiGWName', 'apiGWDesc'],
                showOK: false,
                apiGWName,
                apiGWDesc,
                requestMethod: requestMethod
            }
        } else {
            this.state = {
                configs: ['apiGWName', 'apiGWDesc'],
                showOK: false,
                apiGWName: props.defalutName,
                apiGWDesc: '',
                requestMethod: 'GET'
            };
        }
    }


    componentWillReceiveProps(next) {
        if (next.path !== '' && next.path !== null) {
            let {apiGWName, apiGWDesc, requestMethod} = next.path;
            this.setState({
                apiGWName,
                apiGWDesc,
                requestMethod
            })
        } else {
            this.setState({
                apiGWName: next.defalutName,
                apiGWDesc: '',
                requestMethod: 'GET'
            });
        }
    };

    switchConfig = (label) => {
        return (e) => {
            this.setState({
                [label]: e.target.value
            })
        };
    };

    ok = (id) => {
        let {apiGWName, apiGWDesc, requestMethod} = this.state;
        let varObj = {
            id,
            user_id: this.props.userID,
            apiGWGroup_id: this.props.groupID,
            deploy_id: this.props.deployID,
            apiGWName,
            apiGWDesc,
            requestMethod,
            serviceType: 'SCF',
            apiGWPath: '/graphql',
            timeout: 300,
            apiId: '',
            createdAt: new Date().getTime(),
            updatedAt: ''
        };
        if (this.props.path === '') {
            if(this.props.deployID !== '' && this.props.groupID!=='' && this.props.deployID !== null && this.props.groupID!==null) {
                request(graphqlUrl, ADD_APIGWPATH, varObj).then(
                    data => {
                        if (data.create_apiGWPath !== null) {
                            this.setState({
                                showOK: true
                            });
                            this.props.stepByStep(3);
                        }
                        setTimeout(()=>{
                            this.setState({
                                showOK: false
                            })
                        }, 1500)
                    }
                )
            }
        } else {
            let {apiGWName, apiGWDesc, requestMethod} = this.state;
            let varObj = {
                id: this.props.path.id,
                apiGWName,
                apiGWDesc,
                requestMethod,
                updatedAt: new Date().getTime()
            };
            request(graphqlUrl, UPDATE_APIGWPATH, varObj).then(
                data => {
                    if (data.update_apiGWPath !== null) {
                        this.setState({
                            showOK: true
                        });
                        this.props.stepByStep(3);
                    }
                    setTimeout(()=>{
                        this.setState({
                            showOK: false
                        })
                    }, 1500)
                }
            )
        }
    };

    render() {
        const customPanelStyle = {
            background: '#f7f7f7',
            borderRadius: 4,
            marginBottom: 24,
            border: 0,
            overflow: 'hidden',
        };

        return (
            <div>
                <Collapse bordered={false}>
                    <Panel header=<FormattedMessage id="Want more options?"/> style={customPanelStyle}>
                        {
                            this.state.configs.map(config => (
                                <div key={config} style={{marginBottom: 10}}>
                                    <span className='vice-title'>
                                        {
                                            youMustFill[config]?
                                                <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
                                                :
                                                ''
                                        }
                                        <FormattedMessage id={valueToKey[config]}/>
                                        &nbsp;
                                        <Tooltip placement="top" title={toolTipTitle[config]}>
                                            <Icon type="question-circle"/>
                                        </Tooltip>
                                    </span>
                                    <Input value={this.state[config]} style={{width: 200}}
                                           onChange={this.switchConfig(config)}/>
                                </div>
                            ))
                        }
                        <div style={{marginBottom: 10}}>
                            <span className='vice-title'>
                                {
                                    youMustFill['requestMethod']?
                                        <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
                                        :
                                        ''
                                }
                                <FormattedMessage id={valueToKey['requestMethod']}/>
                                &nbsp;
                                <Tooltip placement="top" title={toolTipTitle['requestMethod']}>
                                    <Icon type="question-circle"/>
                                </Tooltip>
                            </span>
                            <Radio.Group onChange={this.switchConfig('requestMethod')}
                                         defaultValue={this.state.requestMethod}
                                         buttonStyle="solid">
                                <Radio.Button value="GET">get</Radio.Button>
                                <Radio.Button value="POST">post</Radio.Button>
                            </Radio.Group>
                        </div>
                    </Panel>
                </Collapse>
                {
                    manageUsers.includes(this.props.userID) ?
                        <div>
                            <Button onClick={()=>{
                                const id = idGen('path');
                                this.ok(id);
                                this.props.pass(id, 'path');
                            }} type='primary'><FormattedMessage id="save"/></Button>
                            {
                                this.state.showOK === true?
                                    <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
                                    :
                                    ''
                            }
                        </div>
                        :
                        this.props.trialcase?
                            ''
                            :
                            <div>
                                <Button onClick={()=>{
                                    const id = idGen('path');
                                    this.ok(id);
                                    this.props.pass(id, 'path');
                                }} type='primary'><FormattedMessage id="save"/></Button>
                                {
                                    this.state.showOK === true?
                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
                                        :
                                        ''
                                }
                            </div>
                }

            </div>
        )
    }
}

export default APIPathCard;