import {
	observable,
	action,
	computed,
} from 'mobx';
import {
	Button,
} from 'antd';

export default class TopStore {
	constructor(api, rootStore) {
		this.api = api;
		this.rootStore = rootStore;
	}

	get staticTopProps() {
		return{
			showDropIcon: true,
			iconBgcolor: '#217346',
			icon: <i className='icon-coms-hrm'/>,
		}
	}

	@observable tConf = [];
	@observable rConf = [];

	@action fetchRightMenu = (params = {}) => {
		return this.api.fetchRightMenu(params).then(datas => {
			const {
				btnMenu = []
			} = datas;

			const {
				tConf,
				rConf
			} = this.convertDatasToTopRightConf(btnMenu);

			this.tConf = tConf;
			this.rConf = rConf;
		})
	}

	@computed get topButtons() {
		return this.tConf.map((item, index) => {
			const {
				menuFun,
				menuName
			} = item;

			const state = this.getRightMenuState(index);

			return (
				<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jomjdp`} 
					type="primary" 
					disabled={state} 
					onClick={() => this.rootStore[menuFun]()}
				>
					{menuName}
				</Button>
			)
		});
	}

	@computed get dropMenuDatas() {
		return this.rConf.map((item, index) => {
			const {
				menuFun,
				menuName,
				menuIcon
			} = item;

			const state = this.getRightMenuState(index);

			return {
				key: menuFun,
				disabled: state,
				icon: <i className={`${menuIcon}`} />,
				content: menuName,
				onClick: () => this.rootStore[menuFun]()
			}
		});
	}

	getRightMenuState=(index)=>{
		let state = false;
		const rightMenuStates = this.rootStore.getRightMenuState;

		if (rightMenuStates) {
			state = rightMenuStates[index];
		}

		return state;
	}

	convertDatasToTopRightConf = (datas) => {
		let tConf, rConf;
		tConf = datas && datas.filter(data => {
			const {
				isTop,
				isBatch
			} = data;
			if (isTop === '1') {
				return true;
			}
			if (isBatch === '1') {
				return true;
			}
		})

		rConf = datas;

		return {
			tConf,
			rConf
		}
	}

}