import React from 'react'
import { Input, Icon, Button, Popconfirm, Switch } from 'antd'
import { connect } from 'dva'
import './header.less'
import SettingBox from './settingBox';

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

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

    isOwner = () => {
        const { dashboardDesigner, main } = this.props;
        const { creatorCode } = dashboardDesigner;
        const { currentUser } = main;
        return currentUser.code === creatorCode;
    }

    render() {
        const { dashboardDesigner, dispatch } = this.props;
        const { editMode } = dashboardDesigner;

        return (
            <div className='dashboarddesigner-header'>
                <div className='header-item toolbar-back'>
                    {this.isOwner() && <Popconfirm
                        placement="bottomLeft"
                        title="离开前保存修改吗？"
                        visible={this.state.visibleConfirm}
                        onVisibleChange={this.handleVisibleChange}
                        onConfirm={async () => {
                            this.setState({
                                visibleConfirm: false
                            });
                            try {
                                await dispatch({ type: 'dashboardDesigner/saveWithThumbnail' });
                            }catch(e){
                                return e
                            }                            
                            dispatch({ type: 'main/redirect', path: '/dashboard' });
                        }}
                        onCancel={() => {
                            this.setState({
                                visibleConfirm: false
                            });
                            dispatch({ type: 'main/redirect', path: '/dashboard' });
                        }}
                        okText="保存"
                        cancelText="不保存"
                    >
                        <Button onClick={() => {
                            console.log(dashboardDesigner.dirty);
                            if(!dashboardDesigner.dirty) {
                                dispatch({ type: 'main/goBack', path: '/chart' });
                            }
                        }}>
                            <Icon type='left' />返回
                        </Button>
                    </Popconfirm>}
                    {!this.isOwner() && <Button onClick={(e) => {
                        dispatch({ type: 'main/goBack', path: '/chart' });
                    }}>
                        <Icon type='left' />返回
                    </Button>}
                    {this.isOwner() && <Button onClick={() => {
                        if(dashboardDesigner.code && dashboardDesigner.code !== -1) {
                            dispatch({ type: 'dashboardDesigner/saveWithThumbnail' });
                        }else {
                            dispatch({ type: 'dashboard/remoteAdd' });
                        }
                    }}><Icon type='save' />保存</Button>}
                </div>
                <div className='header-item toolbar-title'>
                    <Input
                        className='input-title'
                        value={dashboardDesigner.name}
                        disabled={!this.isOwner()}
                        addonAfter={this.isOwner() ? <Icon type="edit" 
                            onClick={(e) => {
                                const input = e.currentTarget.parentElement.parentElement.getElementsByTagName('input')[0];
                                input && input.focus()
                            }}
                        /> : null}
                        onChange={(e) => {
                            dispatch({ type: 'dashboardDesigner/setField', name: 'name', value: e.target.value });
                        }}
                    />
                </div>
                <div className='header-item toolbar-viewswitch'>
                    {this.isOwner() && <Switch
                        className={`mode-switch ${editMode ? 'edit-mode-switch' : 'view-mode-switch'}`}
                        checked={editMode}
                        checkedChildren="编辑"
                        unCheckedChildren="浏览"
                        onChange={(checked) => {
                            dispatch({ type: 'dashboardDesigner/setEditMode', checked });
                            // 主动触发一次window的resize事件
                            window.setTimeout(() => {
                                var e = document.createEvent("Event");
                                e.initEvent("resize", true, true);
                                window.dispatchEvent(e);
                            }, 300);
                        }}
                    />}
                </div>
            </div>
        );
    }
}

export default connect(({ present: { main, dashboardDesigner } }) => ({ main, dashboardDesigner }))(Header);