import React, {Component} from 'react';
import {Input, Radio, Collapse, Button, Icon} from 'antd';
import {ADD_DEPLOY, UPDATE_DEPLOY} from "../../../../../gql";
import {request} from 'graphql-request'

const Panel = Collapse.Panel;

const idGen = (kind) => {
    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
};

class DeployCard extends Component {
    constructor(props) {
        super(props);
        let {functionName, cosBucketName, cosObjectName, cosBucketRegion, serviceName, vpcId, subnetId, region} = props.deploy;
        props.deploy !== '' ?
            this.state = {
                configs: ['description', 'cosBucketName', 'cosObjectName', 'vpcId', 'subnetId'],
                description: '',
                showOK: false,
                functionName,
                region,
                cosBucketName,
                cosObjectName,
                cosBucketRegion,
                serviceName,
                vpcId,
                subnetId
            }
            :
            this.state = {
                configs: ['description', 'cosBucketName', 'cosObjectName', 'vpcId', 'subnetId'],
                description: '',
                showOK: false,
                functionName: props.schemaName,
                region: props.region,
                cosBucketName: 'graphqlfc',
                cosObjectName: props.schemaName,
                cosBucketRegion: props.region,
                serviceName: '',
                vpcId: '',
                subnetId: '',
            }
    }

    componentWillReceiveProps(next) {
        if (next.deploy !== '') {
            let {functionName, cosBucketName, cosObjectName, cosBucketRegion, serviceName, vpcId, subnetId, region} = next.deploy;
            this.setState({
                functionName,
                region,
                cosBucketName,
                cosObjectName,
                cosBucketRegion,
                serviceName,
                vpcId,
                subnetId
            })
        } else {
            this.setState({
                functionName: next.schemaName,
                region: next.region,
                cosBucketName: 'graphqlfc',
                cosObjectName: next.schemaName,
                cosBucketRegion: next.region,
                serviceName: '',
                vpcId: '',
                subnetId: ''
            });
        }
    };

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

    ok = (id) => {
        let {description, cosBucketName, subnetId, cosObjectName, region, vpcId, cosBucketRegion, functionName} = this.state;
        let varObj = {
            id,
            cloud_id: this.props.cloudID,
            user_id: this.props.userID,
            description,
            cosBucketName,
            subnetId,
            cosObjectName,
            region,
            vpcId,
            cosBucketRegion,
            functionName,
            memorySize: 512,
            timeout: 300,
            handler: 'tencent_graphql.Bridge::handler',
            serviceName: "",
            fc_id: '',
            createdAt: new Date().getTime(),
            updatedAt: ''
        };
        if (this.props.deploy === '') {
            request('http://123.206.193.98:3000/graphql', ADD_DEPLOY, varObj).then(
                data => {
                    if (data.create_deploy !== null) {
                        this.setState({
                            showOK: true
                        })
                    }
                    setTimeout(()=>{
                        this.setState({
                            showOK: false
                        })
                    }, 1500)
                }
            )
        } else {
            let {description, cosBucketName, subnetId, cosObjectName, region, vpcId, cosBucketRegion, functionName} = this.state;
            let varObj = {
                id: this.props.deploy.id,
                description,
                subnetId,
                cosBucketName,
                cosObjectName,
                region,
                vpcId,
                cosBucketRegion,
                functionName,
                updatedAt: new Date().getTime()
            };
            request('http://123.206.193.98:3000/graphql', UPDATE_DEPLOY, varObj).then(
                data => {
                    if (data.update_deploy !== null) {
                        this.setState({
                            showOK: true
                        })
                    }
                    setTimeout(()=>{
                        this.setState({
                            showOK: false
                        })
                    }, 1500)
                }
            )
        }
    };

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

        return (
            <div>
                <div style={{marginBottom: 10}}>
                    <span className='vice-title'>functionName: </span>
                    <Input value={this.state.functionName} style={{width: 400}}
                           onChange={this.switchConfig('functionName')}/>
                </div>
                <div style={{marginBottom: 10}}>
                    <span className='vice-title'>region: </span>
                    <Radio.Group onChange={(e) => {
                        this.props.switchRegion(e);
                        this.setState({
                            region: e.target.value
                        })
                    }} defaultValue={this.state.region} buttonStyle="solid">
                        <Radio.Button value="guangzhou">Guangzhou</Radio.Button>
                        <Radio.Button value="shanghai">Shanghai</Radio.Button>
                        <Radio.Button value="beijing">Beijing</Radio.Button>
                        <Radio.Button value="chengdu">Chengdu</Radio.Button>
                    </Radio.Group>
                </div>
                <Collapse bordered={false}>
                    <Panel header="Want more options?" style={customPanelStyle}>
                        <div style={{marginBottom: 10}}>
                            <span className='vice-title'>cosBucketRegion: </span>
                            <Radio.Group onChange={this.switchConfig('cosBucketRegion')}
                                         value={this.state.cosBucketRegion} buttonStyle="solid">
                                <Radio.Button value="guangzhou">Guangzhou</Radio.Button>
                                <Radio.Button value="shanghai">Shanghai</Radio.Button>
                                <Radio.Button value="beijing">Beijing</Radio.Button>
                                <Radio.Button value="chengdu">Chengdu</Radio.Button>
                            </Radio.Group>
                        </div>
                        <div style={{marginBottom: 10}}>
                            <span className='vice-title'>serviceName: </span>
                            <Input value={this.state.serviceName} style={{width: 200}} disabled
                                   onChange={this.switchConfig('serviceName')}/>
                        </div>
                        {
                            this.state.configs.map(config => (
                                <div key={config} style={{marginBottom: 10}}>
                                    <span className='vice-title'>{config}: </span>
                                    <Input value={this.state[config]} style={{width: 200}}
                                           onChange={this.switchConfig(config)}/>
                                </div>
                            ))
                        }
                    </Panel>
                </Collapse>
                <Button onClick={()=>{
                    const id = idGen('deploy');
                    this.ok(id);
                    this.props.pass(id, 'deploy');
                }} type='primary'>ok</Button>
                {
                    this.state.showOK === true?
                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
                        :
                        ''
                }
            </div>
        )
    }
}

export default DeployCard;