import React from 'react'
import { findDOMNode } from 'react-dom'
import { Layout, Tabs, Switch, Button } from 'antd'
import BaseConfigForm from './sections/baseConfigForm'
import AggregateTableConfigForm from './sections/aggregateTableConfigForm'
import DataViewConfigForm from './sections/dataViewConfigForm'
import BarConfigForm from './sections/barConfigForm'
import PieConfigForm from './sections/pieConfigForm'
import LineConfigForm from './sections/lineConfigForm'
import TableView from './charts/tableView'
import ScatterConfigForm from './sections/ScatterConfigForm'
import StyleConfigForm from './sections/styleConfigForm'
import OtherConfigForm from './sections/otherConfigForm'
import EchartsView from './charts/echartsView'
import ToolBar from './sections/toolbar'
import { connect } from 'dva'
import './content.less'
const { Header, Sider, Content, Footer } = Layout
const { TabPane } = Tabs

class ChartDesignerContent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            autoRefresh: true,
            collapsed: false,
            contentSize: {
                width: 0,
                height: 0
            }
        }
    }

    componentDidMount() {
        this.refreshContentSize();
    }

    /**
     * 设置图表区域大小
     */
    refreshContentSize = () => {
        let contentEl = findDOMNode(this.refs.contentEl);
        if(!contentEl) { return; }
        let contentLayout = contentEl.getBoundingClientRect();
        console.log(contentLayout);
        // let scroll = contentEl.scrollHeight > contentEl.clientHeight;
        this.setState({
            contentSize: {
                width: contentLayout.width,
                height: contentLayout.height
            }
        });
    }

    onCollapse = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        })
    }

    render() {
        const { chartDesigner, dispatch } = this.props;
        const { autoRefresh, contentSize } = this.state;
        const { baseConfig } = chartDesigner;
        const { viewType } = baseConfig;
        const formItemLayout = {
            labelCol: { span: 8 },
			wrapperCol: { span: 16 },
        };

        let configForm, chartView;

        if(viewType === 'aggregateTable') {
            configForm = (<AggregateTableConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
            chartView = (<TableView contentSize={contentSize}/>);
        }else if(viewType === 'dataView') {
            configForm = (<DataViewConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
            chartView = (<TableView contentSize={contentSize}/>);
        }else if(viewType === 'line') {
            configForm = (<LineConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
            chartView = (<EchartsView contentSize={contentSize}/>);
        }else if(viewType === 'bar') {
            configForm = (<BarConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
            chartView = (<EchartsView contentSize={contentSize}/>);
        }else if(viewType === 'pie') {
            configForm = (<PieConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
            chartView = (<EchartsView contentSize={contentSize}/>);
        }else if(viewType === 'scatter') {
            configForm = (<ScatterConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
            chartView = (<EchartsView contentSize={contentSize}/>);
        }

        return (
            <Layout className='chartdesigner'>
                <Sider className={`sider-left${this.state.collapsed ? ' sider-left-collapsed' : ''}`}>
                    <Button className='collapse-toggle' shape='circle' size='small' icon={`${this.state.collapsed?'right':'left'}`} onClick={this.onCollapse} />
                    <Tabs className='sider-tabs'>
                        <TabPane className='chartconfig' tab='图表设置' key='1'>
                            <BaseConfigForm formItemLayout={formItemLayout}/>
                            { configForm }
                        </TabPane>
                        <TabPane className='styleconfig' tab='样式设置' key='2'>
                            <StyleConfigForm formItemLayout={formItemLayout}/>
                        </TabPane>
                        <TabPane className='otherconfig' tab='其他设置' key='3'>
                            <OtherConfigForm formItemLayout={formItemLayout}/>
                        </TabPane>
                    </Tabs>
                    {!this.state.collapsed && <Footer className='sider-footer'>
                        <div className='fresh-bar'>
                            <Switch defaultChecked={autoRefresh} checkedChildren='自动刷新' unCheckedChildren='手动刷新' onChange={(checked) => {
                                // 自动刷新后立即请求一次数据
                                if(checked) {
                                    dispatch({ type: 'chartDesigner/fetchChartData' });
                                }
                                this.setState({
                                    autoRefresh: checked
                                });
                                // dispatch({ type: 'chartDesigner/silentSetField', name: 'autoRefresh', value: checked })
                            }}/>
                            <Button style={{ display: autoRefresh ? 'none' : 'block' }} size='small' onClick={() => { dispatch({ type: 'chartDesigner/fetchChartData'}) }}
                            >立即刷新</Button>
                        </div>
                        </Footer> }
                </Sider>
                <Content className='view-content' >
                    <Layout>
                        <Header className='content-header'>
                            <ToolBar className='header-toolbar' autoRefresh={autoRefresh} />
                        </Header>
                        <Content className='content-body' ref='contentEl' >
                            { chartView }
                        </Content>
                    </Layout>
                </Content>
            </Layout>
        )
    }
}
function mapStateToProps(state) {
    const chartDesigner = state.present.chartDesigner;

    return { chartDesigner: chartDesigner }
}
export default connect(mapStateToProps)(ChartDesignerContent);