import React from 'react'
import { Collapse, Form, Select } from 'antd'
import { connect } from 'dva'
import themes from './theme/index'

class ThemeConfig extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            formItemLayout: {
                labelCol: { span: 8 },
                wrapperCol: { span: 16 },
            }
        }
    }

    render() {
        const { chartDesigner, dispatch } = this.props;
        const { formItemLayout } = this.state;
        const { theme, chartOption } = chartDesigner;

        return <Form>
            <Form.Item label='主题' {...formItemLayout}>
                <Select
                    defaultValue={theme || 'default'}
                    onChange={(value, item) => {
                        dispatch({ type: 'chartDesigner/changeFields', fields: [
                            { name: 'theme', value: value },
                            { name: 'chartOption', value: { ...chartOption, themeConfig: themes[value] } }
                        ] });
                    }}
                >
                    <Select.Option value='default'>默认</Select.Option>
                </Select>
            </Form.Item>
        </Form>
    }
}

export default connect(({ present: { chartDesigner } }) => ({ chartDesigner }))(ThemeConfig)