import React from 'react'
import { Divider, 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 } = chartDesigner;

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

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