import React from 'react'
import { message, Modal, Form, Input, InputNumber } from 'antd'
import copy from 'copy-to-clipboard'
const FormItem = Form.Item

class ShareBox extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            copyDisabled: false,
            copyText: '复制链接',
            delay: 7,
            dirty: false
        }
    }

    render() {
        const { visibleBox, hideBox, shareUrl, onRefreshKey } = this.props;
        const { copyDisabled, copyText, delay, dirty } = this.state;

        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 4 },
        }

        return (
            <Modal
                className='share-box'
                title={'分享报表'}
                visible={visibleBox}
                onCancel={hideBox}
                maskClosable={true}
                destroyOnClose={true}
                footer={null}
            >
                <Form layout="horizontal" size='small'>
                    <FormItem>
                        <Input
                            disabled
                            placeholder="分享地址有误，请尝试重新打开此页面"
                            value={shareUrl}
                            addonAfter={<span style={{ cursor: copyDisabled ? 'not-allowed' : 'pointer' }} onClick={() => {
                                if(copyDisabled) {
                                    return;
                                }
                                copy(shareUrl);
                                this.setState({
                                    copyDisabled: true,
                                    copyText: '已复制'
                                }, () => {
                                    setTimeout(() => {
                                        this.setState({
                                            copyDisabled: false,
                                            copyText: '复制链接'
                                        });
                                    }, 3000)
                                });
                            }}>{copyText}</span>}
                        >
                        </Input>
                    </FormItem>
                    <FormItem label="有效期（天）" {...formItemLayout}>
                        <InputNumber
                            min={1}
                            value={delay}
                            onChange={(val) => {
                                this.setState({
                                    delay: val,
                                    dirty: true
                                })
                            }}
                            onBlur={() => {
                                if(!dirty) {
                                    return;
                                }
                                onRefreshKey(delay).then(() => {
                                    message.success('分享链接已更新');
                                    this.setState({
                                        dirty: false
                                    });
                                })
                            }}
                        >
                        </InputNumber>
                    </FormItem>
                </Form>
            </Modal>
        )
    }
}

export default ShareBox