import {
	observer
} from 'mobx-react';
import {
	WeaSearchGroup,
	WeaHelpfulTip,
} from 'ecCom';
import Table from './Table';
import ButtonIcons from './ButtonIcons';

@observer
export default class TableUnderSearchGroup extends React.Component {
	constructor(props) {
		super(props);
	}

	getCustomComponent = (buttonIcons, tips) => {
		return (
			<div>
				<ButtonIcons buttonIcons={buttonIcons} />
				<WeaHelpfulTip title={this.getTitle(tips)} />
			</div>
		)
	}

	getTitle = (tips) => {
		return (
			<ul>
				{
					tips.map(tip =><li>{tip}</li> )
				}
			</ul>
		);
	}

	getChildren = (store) => {
		return <Table store={store} />;
	}

	render() {
		const {
			store
		} = this.props, {
			searchGroupTitle,
			buttonIcons,
			childrenReduceTip,
		} = store;

		return (
			<WeaSearchGroup 
				showGroup
				title={searchGroupTitle} 
				customComponent={this.getCustomComponent(buttonIcons,childrenReduceTip)}
				children={this.getChildren(store)}
			/>
		)
	}
}