import * as React from "react";
import { Popup } from "semantic-ui-react";
import SideSuperMenu from "./components/side-super-menu";

interface Props {
  items: any;
  trigger: any;
  onMenuItemClick?: any;
}

interface State {
  activeItem: number;
}

export default class MagaSuperMenu extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      activeItem: 0,
    };
  }

  render() {
    const { activeItem } = this.state;
    const { items, trigger, onMenuItemClick } = this.props;

    return (
      <Popup
        offset={[0, 0]}
        className="popup-super-menu"
        on="click"
        wide="very"
        content={
          <SideSuperMenu
            organizations={items.organizations}
            items={items.organizations[activeItem]}
            onMenuItemClick={onMenuItemClick}
            onChangeorganization={(indexOrganization: number) => {
              this.setState({ activeItem: indexOrganization });
            }}
          />
        }
        position="bottom center"
        trigger={trigger}
        basic
      />
    );
  }
}