import React from 'react'
import { Input, Icon, Button, Popconfirm, Tooltip, Modal } from 'antd'
import { connect } from 'dva'
import { ActionCreators } from 'redux-undo'
import './header.less'

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visibleConfirm: false,
            visibleCopyBox: false,
            newHeaderLabel: ''
        }
    }

    handleVisibleChange = (visible) => {
        this.setState({ visibleConfirm: visible });
    }

    copyHandler = () => {
        const { dispatch } = this.props;
        this.setState({
            visibleCopyBox: false
        }, () => {
            dispatch({ type: 'chartDesigner/remoteCopyAdd', newHeaderLabel: this.state.newHeaderLabel });
        });
    }

    render() {
        const { chartDesigner, dispatch, past, future } = this.props;
        const { newHeaderLabel } = this.state;
        return (
            <div className='header'>
                <div className='header-item toolbar-back'>
                    <Popconfirm
                        placement="bottomLeft"
                        title="离开前保存修改吗？"
                        visible={this.state.visibleConfirm}
                        onVisibleChange={this.handleVisibleChange}
                        onConfirm={() => {
                            this.setState({
                                visibleConfirm: false
                            });
                            dispatch({ type: 'chart/remoteModify' });
                            dispatch({ type: 'main/goBack', path: '/chart' });
                        }}
                        onCancel={() => {
                            this.setState({
                                visibleConfirm: false
                            });
                            dispatch({ type: 'main/goBack', path: '/chart' });
                        }}
                        okText="保存"
                        cancelText="不保存"
                    >
                        <Button onClick={(e) => {
                            if(!chartDesigner.dirty) {
                                dispatch({ type: 'main/goBack', path: '/chart' });
                            }
                        }}>
                            <Icon type='left' />返回
                        </Button>
                    </Popconfirm>
                    <Button className='button-uodo' onClick={() => {
                        if(chartDesigner.code && chartDesigner.code !== -1) {
                            dispatch({ type: 'chart/remoteModify' });
                        }else {
                            dispatch({ type: 'chart/remoteAdd' });
                        }
                        dispatch({ type: 'chartDesigner/setDirty', dirty: false });
                    }}><Icon type='save' />保存</Button>
                </div>
                <div className='header-item toolbar-title'>
                    <Input
                        className='input-title' 
                        addonAfter={<Icon type="edit" 
                            onClick={(e) => {
                                const input = e.currentTarget.parentElement.parentElement.getElementsByTagName('input')[0];
                                input && input.focus()
                            }}
                        />}
                        onChange={(e) => {
                            dispatch({ type: 'chartDesigner/setField', name: 'header', value: { label: e.target.value } });
                        }}
                        value={chartDesigner.header.label}
                    />
                </div>
                <div className='header-item toolbar-buttons'>
                    <div>
                        <Tooltip title='复制新增'>
                            <Button className='tools-btn' icon='copy' onClick={() => {
                                this.setState({
                                    visibleCopyBox: true,
                                    newHeaderLabel: chartDesigner.header.label + '_副本'
                                })
                            }}>
                            </Button>
                        </Tooltip>
                        <Modal
                            title="以当前图表配置创建新的图表副本"
                            visible={this.state.visibleCopyBox}
                            okText='创建'
                            onOk={this.copyHandler}
                            onCancel={() => {this.setState({visibleCopyBox:false})}}
                        >
                            <p>当前的图表会被保存，您将从新的图表副本继续设计。</p>
                            副本名称:<Input value={newHeaderLabel} placeholder={chartDesigner.header.label+'_副本'} onChange={(e) => {
                                this.setState({
                                    newHeaderLabel: e.target.value
                                });
                            }} />
                        </Modal>
                        <Tooltip title='撤销'>
                            <Button className='tools-btn' icon='undo' disabled={past.length === 0} onClick={() => {
                                dispatch(ActionCreators.undo());
                            }}></Button>
                        </Tooltip>
                        <Tooltip title='重做'>
                            <Button className='tools-btn' icon='redo' disabled={future.length === 0} onClick={() => {
                                dispatch(ActionCreators.redo());
                            }}></Button>
                        </Tooltip>
                    </div>
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    const { past, present, future } = state;
    const chartDesigner = present.chartDesigner;
    return { chartDesigner, past, future }
}
export default connect(mapStateToProps)(Header);