import React from 'react'
import { findDOMNode } from 'react-dom'
import { Layout, Button, Switch, Dropdown, Menu, Icon } from 'antd'
import { connect } from 'dva'
import ViewLayout from './viewLayout'
import ChooseChartBox from './chooseChartBox'
const { Header, Content } = Layout

class DashboardDesignerContent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            contentSize: {
                scroll: false,
                width: 0,
                height: 0,
            },
            editMode: true,
            operation: 'create',
            visibleBox: false,
        };
    }

    componentDidMount() {
        this.refreshContentSize(true);
        this.addResizeListener();
    }

    addResizeListener = () => {
        window.addEventListener("resize", () => {
            this.refreshContentSize(true);
        });
    }

    showBox = (o) => {
        this.setState({
            operation: o,
            visibleBox: true
        });
    }

    hideBox = (o) => {
        this.setState({
            visibleBox: false
        });
    }

    /**
     * 重设容器宽度
     */
    refreshContentSize = (flag) => {
        let contentEl = findDOMNode(this.refs.contentEl);
        if(!contentEl) { return; }
        let _scroll = contentEl.scrollHeight > contentEl.clientHeight;

        if(!flag && this.state.contentSize.scroll === _scroll) { // 如果滚动条没有变化则直接退出
            return;
        }
        this.setState({
            contentSize: {
                scroll: _scroll,
                width: contentEl.offsetWidth - (_scroll ? 25 : 0), // 有滚动条时需要减去滚动条的宽度
                height: contentEl.clientHeight
            }
        });
    }

    render() {
        const { contentSize, editMode, operation, visibleBox } = this.state;
        return <Layout className='content'>
            <Header>
                <div>
                    <Switch
                        className={`mode-switch ${editMode ? 'edit-mode-switch' : 'view-mode-switch'}`}
                        checked={editMode}
                        checkedChildren="编辑"
                        unCheckedChildren="浏览"
                        onChange={(checked) => {
                            this.setState({
                                editMode: checked
                            })
                        }}
                    />
                </div>
                <div>
                    {editMode && <Dropdown overlay={(
                        <Menu onClick={(item) => {
                            const type = item.key;
                            if(type === 'chart') {
                                this.showBox("create");
                            }else {
                                const { dispatch } = this.props;
                                dispatch({ type: 'dashboardDesigner/addRichText' });
                            }
                        }}>
                            <Menu.Item key='chart'>图表</Menu.Item>
                            <Menu.Item key='richText'>富文本</Menu.Item>
                        </Menu>
                    )} trigger={['click']}>
                        <Button>
                            <Icon type="plus" />添加
                        </Button>
                    </Dropdown>}
                    <ChooseChartBox operation={operation} visibleBox={visibleBox} hideBox={this.hideBox} />
                </div>
            </Header>
            <Content ref='contentEl' className='dashboard-content'>
                <ViewLayout contentSize={contentSize} reset={this.refreshContentSize} editMode={editMode}/>
            </Content>
        </Layout>
    }
}
function mapStateToProps(state) {
    const DashboardDesigner = state.present.DashboardDesigner;
    return { DashboardDesigner }
}
export default connect(mapStateToProps)(DashboardDesignerContent);