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>
    </>
  );
});
