import React from 'react'
import { Form, InputNumber, Select, Checkbox } from 'antd'
import { connect } from 'dva'
import XAxisItem from './xAxisItem';
import YAxisItem from './yAxisItem';
import DrillList from './drillList';
import GRANULARITY from './granularity.json';

const { Option } = Select;
const FormItem = Form.Item;
const formItemLayout = {
	labelCol: { span: 8 },
	wrapperCol: { span: 16 },
};
const PieConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
	const { columns, baseConfig, pieConfig } = chartDesigner;

	return (
		<Form hideRequiredMark={true}>
			<FormItem label='扇区索引' {...formItemLayout}>
				<XAxisItem value={pieConfig.xAxis} options={columns.filter(c =>['ordinal', 'categorical', 'time'].indexOf(c.type) > -1)}
					onChange={({ column, granularity }) => {
						dispatch({ type: 'chartDesigner/changeField', name: 'pieConfig', value: {
							...pieConfig,
							xAxis: { column, granularity },
							drillable: false,
							drillList: [{ column, granularity }] 
						}, autoRefresh });
					}}
				/>
			</FormItem>
			<FormItem label='值' {...formItemLayout}>
				<YAxisItem value={pieConfig.yAxis} options={columns} gaugeType={baseConfig.viewType} onChange={({ column, gauge }) => {
					dispatch({ type: 'chartDesigner/changeField', name: 'pieConfig', value: { ...pieConfig, yAxis: { column, gauge } }, autoRefresh });
				}}/>
			</FormItem>
			<FormItem label='排序目标' {...formItemLayout}>
				<Select
					placeholder='扇区索引'
					allowClear={true}
					onChange={(value) => {
						dispatch({ type: 'chartDesigner/changeField', name: 'pieConfig', value: { ...pieConfig, sortTarget: value }, autoRefresh });
					}}
					value={pieConfig.sortTarget}
				>
					<Option value='x'>扇区索引</Option>
					<Option value='y'>值</Option>
				</Select>
			</FormItem>
			<FormItem label='排序方式' {...formItemLayout}>
				<Select
					placeholder='升序'
					allowClear={true}
					onChange={(value) => {
						dispatch({ type: 'chartDesigner/changeField', name: 'pieConfig', value: { ...pieConfig, sortType: value }, autoRefresh });
					}}
					value={pieConfig.sortType}
				>
					<Option value='ASC'>升序</Option>
					<Option value='DESC'>降序</Option>
				</Select>
			</FormItem>
			<FormItem label='阈值' {...formItemLayout}>
				<InputNumber
					defaultValue={chartDesigner.pieConfig.threshold}
					placeholder={chartDesigner.defaultPieThreshold}
                    onBlur={e => {
						let value = e.target.value;
						if(value !== chartDesigner.pieConfig.threshold) {
							let fields = [{ name: 'pieConfig', value: { ...pieConfig, threshold: value } }];
							dispatch({ type: 'chartDesigner/changeFields', fields, autoRefresh });
						}
                    }}
                    onKeyDown={e => {
                        if(e.keyCode === 13) {
                            let value = e.target.value;
							if(value !== chartDesigner.pieConfig.threshold) {
								let fields = [{ name: 'pieConfig', value: { ...pieConfig, threshold: value } }];
								dispatch({ type: 'chartDesigner/changeFields', fields, autoRefresh });
							}
                        }
                    }}
				/>
			</FormItem>
			{pieConfig.xAxis.column.value && <FormItem label='钻取' {...formItemLayout}>
				<Checkbox
					checked={!!pieConfig.drillable}
					onChange={e => {
						let checked = e.target.checked;
						let drillList = [{ column: pieConfig.xAxis.column, granularity: pieConfig.xAxis.granularity }];
						if(pieConfig.xAxis.column.type === 'time') { // 如果x轴字段是时间类型，自动生成其维度钻取层级
							const granularitys = GRANULARITY['time'];
							let idx = granularitys.findIndex(g => g.value === pieConfig.xAxis.granularity.value);
							for(let i = idx + 1; i < granularitys.length; i++) {
								drillList.push({
									column: pieConfig.xAxis.column,
									granularity: granularitys[i]
								});
							}
						}
						dispatch({ type: 'chartDesigner/changeField', name: 'pieConfig', value: { ...pieConfig, drillable: checked, drillList }, autoRefresh });
					}}
				/>
			</FormItem>}
			{pieConfig.xAxis.column.value && pieConfig.drillable && <FormItem label='钻取层级' {...formItemLayout}>
				<DrillList
					// 可选钻取字段包括时间、类别类型，且当x轴选择的是时间类型时允许重复作为钻取字段（之后会限制年月周等维度的选择）
					list={columns.filter(c => ['categorical', 'time'].indexOf(c.type) > -1)}
					value={pieConfig.drillList || []}
					onChange={list => {
						dispatch({ type: 'chartDesigner/changeField', name: 'pieConfig', value: { ...pieConfig, drillList: list }, autoRefresh });
					}}
				/>
			</FormItem>}
		</Form>
	);
}

function mapStateToProps({ chartDesigner }) {
    return { chartDesigner: chartDesigner }
}

export default connect(mapStateToProps)(PieConfigForm);