import { observer } from 'mobx-react-lite';
import { Instance, types } from 'mobx-state-tree';
import React from 'react';
import Css from './top-right-menu.module.css';

export const Store = types.model({
	visible: types.boolean
}).views((self) => {
	return {
		get style(): React.CSSProperties {
			return {
				display: self.visible ? 'block' : 'none'
			};
		}
	};
}).actions((self) => {
	return {
		show: () => {
			self.visible = true;
		},
		hide: () => {
			self.visible = false;
		},
		toggle: () => {
			self.visible = !self.visible;
		}
	};
});

export type Props = {
	store: Instance<typeof Store>;
	children?: any;
};

export const TopRightMenu = observer((props: Props): JSX.Element => {
	const menuItems = [];
	if (props.children.length > 1) {
		for (let key = 0; key < props.children.length; key++) {
			const item = props.children[key];
			menuItems.push(<li key={key}>{item}</li>);
		}
	} else if (props.children) {
		menuItems.push(<li key={0}>{props.children}</li>)
	}
	return (
		<>
			<button className={Css.menuButton} onClick={(e) => {e.stopPropagation(); props.store.toggle();}}>Menu</button>
			<div className={Css.menu} style={props.store.style}>
				<ul>
					{menuItems}
				</ul>
			</div>
		</>
	);
})