import { h, Component, render } from '@/components/preact'
import Framework from '@/components/element/framework'
import { selector, warn, listenerClose, watch, safety, isArray, deepMerge } from '@/components/common/util'
import defaultOptions from '@/components/config/options'



/**
 * 保留初始化的数据
 */
const initData = {};
const data = {};
const onClose = (el) => Object.keys(data).filter(a => a != el).forEach(el => data[el].closed());
listenerClose(data, onClose);

/**
 * 子组件集合
 */
const childs = {};


/**
 * 对外提供的处理方法
 */
class xmOptions {

	constructor(options) {
		//保留初始化时的数据
		initData[options.el] = options;
		//定义默认值
		this.options = defaultOptions(options.language);
		//开始渲染数据
		this.update(options);
	}

	/**
	 * 更新数据 + 重新渲染
	 */
	update(options = {}){
		//记录最新的配置项
		this.options = deepMerge(this.options, options);

		//如果dom不存在, 则不进行渲染事项
		let dom = selector(this.options.el);
		if(!dom){
			warn(`没有找到渲染对象: ${options.el}, 请检查`)
			return ;
		}

		const onRef = (ref) => childs[this.options.el] = ref;

		render(<Framework { ...this.options } onClose={ onClose } onRef={ onRef } />, dom);

		//记录数据
		data[this.options.el] = this;
		//返回多选对象
		return this;
	}

	/**
	 * 重置多选, 回到初始化的状态
	 */
	reset(){
		let initVal = this.options;
		//设置options的默认数据
		this.options = defaultOptions(initVal.language);
		//更新渲染
		this.update({ ...initData[initVal.el]});
		//子组件初始化
		childs[this.options.el].reset();
		return this;
	}

	/**
	 * 主动打开多选
	 */
	opened(){
		let ref = childs[this.options.el];
		!ref.state.show && ref.onClick();
		return this;
	}

	/**
	 * 主动关闭多选
	 */
	closed(){
		let ref = childs[this.options.el];
		ref.state.show && ref.onClick();
		return this;
	}

	/**
	 * 获取多选选中的数据
	 */
	getValue(type){
		let arr = safety(childs[this.options.el].state.sels);
        
        if(type === 'name'){
            return arr.map(item => item[this.options.prop.name]);
        }else
        if(type === 'nameStr'){
            return arr.map(item => item[this.options.prop.name]).join(',');
        }else
        if(type === 'value'){
            return arr.map(item => item[this.options.prop.value]);
        }else
        if(type === 'valueStr'){
            return arr.map(item => item[this.options.prop.value]).join(',');
        }
        
        return arr;
	}

	/**
	 * 设置多选数据
	 */
	setValue(sels, show){
		if(!isArray(sels)){
			warn('请传入数组结构...')
			return ;
		}
		childs[this.options.el].value(sels, !!show);
		return this;
	}


}

export default xmOptions;
