import React from 'react'
import { connect } from 'dva'
import { Form, Input, Divider, Icon, Tooltip, Button } from 'antd'
import ChooseChartBox from './chooseChartBox'
import CusFilterBox from './cusFilterBox'
import './configSider.less'
const FormItem = Form.Item

class ConfigSider extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            visibleChooseChartBox: false,
            visibleCusFilterBox: false
        };
    }

    showChooseChartBox = (o) => {
        this.setState({
            visibleChooseChartBox: true
        });
    }

    hideChooseChartBox = (o) => {
        this.setState({
            visibleChooseChartBox: false
        });
    }

    showCusFilterBox = (o) => {
        this.setState({
            visibleCusFilterBox: true
        });
    }

    hideCusFilterBox = (o) => {
        this.setState({
            visibleCusFilterBox: false
        });
    }

    generateViewTypes = () => {
        const { dispatch } = this.props;
        const { visibleChooseChartBox } = this.state;

        return (<div className='view-types'>
            <Tooltip placement='bottom' title="图表">
                <div className="view-type-item">
                    <Icon className='viewtype-icon' type="area-chart" theme="outlined" onClick={(item) => {
                        this.showChooseChartBox("create");
                    }}/>
                </div>
            </Tooltip >
            <Tooltip placement='bottom' title="富文本">
                <div className="view-type-item">
                    <Icon className='viewtype-icon' type="book" theme="outlined" onClick={() => {
                        dispatch({ type: 'dashboardDesigner/addRichText' });
                    }}/>
                </div>
            </Tooltip>
            {visibleChooseChartBox && <ChooseChartBox visibleBox={visibleChooseChartBox} hideBox={this.hideChooseChartBox} />}
        </div>)
    }

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

        return <Form className='config-sider' layout={'vertical'}>
            <Divider>报表制作</Divider>
            {this.generateViewTypes()}
            <Divider>字段过滤</Divider>
            <Button className="cus-filter-button" onClick={this.showCusFilterBox}>
                <Icon type='bulb' theme='outlined' />自定义过滤字段
            </Button>
            {visibleCusFilterBox && <CusFilterBox visibleBox={visibleCusFilterBox} hideBox={this.hideCusFilterBox} />}
            <Divider>其他设置</Divider>
            <FormItem label='分享码'>
                <Input
                    value={dashboardDesigner.shareCode}
                    onChange={(e) => {
                        dispatch({ type: 'dashboardDesigner/setField', name: 'shareCode', value: e.target.value });
                    }}
                />
            </FormItem>
        </Form>
    }
}

export default connect(({ present: { dashboardDesigner } }) => ({ dashboardDesigner }))(ConfigSider);