import React from 'react';
import TagGroup from './TagGroup';
import { useState, useEffect } from 'react';

const MenuBody = ({ tagGroups, getTags, selectTag, isPreLaunch }) => {
	const [isTagsRequested, setIsTagsRequested] = useState(false);

	useEffect(() => {
		if (!isTagsRequested) {
			getTags();
			setIsTagsRequested(true);
		}
	})
	if (isPreLaunch || Object.keys(tagGroups).length === 0) {
		return null;
	}
	else {
		return (
			<div className='MenuBody'>
				<TagGroup tags={tagGroups.misc} category={'misc'} selectTag={selectTag} />
				<TagGroup tags={tagGroups.where} category={'where'} selectTag={selectTag} />
				<TagGroup tags={tagGroups.when} category={'when'} selectTag={selectTag} />
				<TagGroup tags={tagGroups.object_type} category={'object_type'} selectTag={selectTag} />
				<TagGroup tags={tagGroups.who} category={'who'} selectTag={selectTag} />
			</div>
		);
	}
};

export default MenuBody;