import { DatePicker, Input, Select, Tooltip } from 'antd';
import * as React from 'react';
import * as Tools from 'jad-tool'
import { baseFilterGroupConfig } from './baseConfig'


const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const Search = Input.Search;
const Option = Select.Option;
const OptGroup = Select.OptGroup;

type FilterType = {
	key: string,				//ant组件名  search | DatePicker | RangePicker |...
	onChange: any,				//change事件触发
	value: any,				//默认值
	render?: any,				//是否自定义组件
	config?: any,				//筛选组件自定义配置
	toolTip?: object,				//筛选组件提示，当前只支持时间范围
}


//react component
export class FilterGroup extends React.Component<{
	onCreateFilterConfig: (iterator) => any				//过滤组件配置数据迭代器
	filterGroup: string[], 								//过滤组件key
	fixeRightGroup?: any[]								//右边float-right 固定渲染列 一般为button
}> {


	//由迭代器根据基础配置生成合适当前使用配置
	private createFilterGroupFactory = function (iterator): FilterType[] {
		var { filterGroup } = this.props;
		if (!iterator || !Tools.isFunction(iterator)) {
			return []
		}
		return filterGroup.map(function (componentName, index) {
			var filterComponentBaseConfig = Tools.extend({}, baseFilterGroupConfig[componentName])
			if (Tools.isPlainObject(filterComponentBaseConfig)) {
				filterComponentBaseConfig = {
					key: componentName
				}
			}
			return iterator(filterComponentBaseConfig, index)
		})
	}


	//create RangePicker
	private getRangePicker(componentConfig) {
		let {
			value,
			onChange,
			config
		} = componentConfig
		config = {
			value,
			onChange,
			...config,
		}
		let key = (config.key ? config.key : '') + 'FilterGroup-RangePicker'
		if (Object.keys(config).includes('defaultValue') && !config.value) {
			delete config.value
			//如果是使用的defaultValue,有可能初始化的时候值不存在，需要重置下组件重新渲染
			if(config['defaultValue']){
				key += 'default-mode'
			}
		}
		return (
			<RangePicker
				key={key}
				{...config}
			></RangePicker>
		)
	}


	//creater search
	private getSearch(componentConfig) {
		let {
			value,
			onSearch,
			onChange,
			config,
		} = componentConfig
		config = {
			value,
			onSearch,
			onChange,
			...config,
		}
		let key = (config.key ? config.key : '') + 'FilterGroup-search'
		if (Object.keys(config).includes('defaultValue') && !config.value) {
			delete config.value
			//如果是使用的defaultValue,有可能初始化的时候值不存在，需要重置下组件重新渲染
			if(config['defaultValue']){
				key += 'default-mode'
			}
		}
		return (
			<Search
				key={key}
				{...config}
			/>
		)
	}


	//create select
	private getSelect(componentConfig) {
		let {
			value,
			onChange,
			config,
			options = [],
			isGroup = false,
		} = componentConfig
		config = {
			options,
			value,
			onChange,
			...config,
		}
		if (onChange) {
			config['onSelect'] = config['onSelect'] || onChange
		}
		let key = (config.key ? config.key : '') + 'FilterGroup-Select'
		if (Object.keys(config).includes('defaultValue') && !config.value) {
			delete config.value
			//如果是使用的defaultValue,有可能初始化的时候值不存在，需要重置下组件重新渲染
			if(config['defaultValue']){
				key += 'default-mode'
			}
		}
		if (isGroup) {
			return (
				<Select
					key={key}
					{...config}
				>
					{options.map((obj, ind) => (
						<OptGroup key={ind} label={obj.label}>
							{obj.map((item, index) => <Option key={index} value={item.value} disabled={item.disabled}>{item['content'] || item['label'] || item.value}</Option>)}
						</OptGroup>
					))}
				</Select>
			)
		}
		else {
			return (
				<Select
					key={key}
					{...config}
				>
					{options.map((item, index) => (
						<Option key={index} value={item.value} disabled={item.disabled}>{item['content'] || item['label'] || item.value}</Option>
					))}
				</Select>
			)
		}
	}


	//render filter label
	private renderLabel(filterInfo) {
		const { labelName = "", labelStyle = {} } = filterInfo
		if (!labelName) {
			return ''
		}
		return (
			<span className='item-label' style={labelStyle}>
				{labelName}
			</span>
		)
	}

	//render filter component
	private renderFactory(filterGroupConfig = []) {
		return filterGroupConfig.map((item, index) => {
			var {
				key,
				render,
			} = item
			switch (key) {
				case 'RangePicker':
					return (
						<span key={key + index} className='jad-filtergroup-filter-group-item'>
							{this.renderLabel(item)}
							{
								item['toolTip'] ?
									<Tooltip {...item['toolTip']}>
										{this.getRangePicker(item)}
									</Tooltip> :
									this.getRangePicker(item)
							}
						</span>
					)
				case 'Search':
					return (
						<span key={key + index} className='jad-filtergroup-filter-group-item'>
							{this.renderLabel(item)}
							{this.getSearch(item)}
						</span>
					)
				case 'Select':
					return (
						<span key={key + index} className='jad-filtergroup-filter-group-item'>
							{this.renderLabel(item)}
							{this.getSelect(item)}
						</span>
					)
				default:
					return (render && Tools.isFunction(render)) ? (
						<span key={key + index} className='jad-filtergroup-filter-group-item'>
							{this.renderLabel(item)}
							{render(item)}
						</span>
					) : ''
			}
		})
	}


	//render filter-right component list
	private renderFixeRightGroup(groupConfig = []) {
		if (!groupConfig) {
			return ''
		}
		return (
			<div className="jad-filtergroup-fixe-right-group-container">
				{groupConfig.map((render, index) => {
					return (<span key={index} className='jad-filtergroup-filter-group-item'> {render} </span>)
				})}
			</div>
		)
	}


	//render filter component groud
	public render() {
		const { onCreateFilterConfig, fixeRightGroup } = this.props
		const filterGroupConfig = this.createFilterGroupFactory(onCreateFilterConfig)
		//render
		return (
			<div className="jad-filtergroup-filter-group-container">
				<div className="jad-filtergroup-fixe-left-group-container">
					{this.renderFactory(filterGroupConfig)}
					{
						this.props.children
					}
				</div>
				{this.renderFixeRightGroup(fixeRightGroup)}
			</div>
		)
	}
}