import * as React from 'react';
import {Component, ReactNode} from 'react';
import {Dropdown, DropdownMenu} from 'reactstrap';
import {UserMenuImage} from './UserMenuImage';
import {Spinner} from './../Spinner';

export interface UserMenuProps {
  children?: ReactNode;
  userImage: ReactNode;
}

export interface UserMenuState {
  open: boolean;
}

export class UserMenu extends Component<UserMenuProps, UserMenuState> {
  state: UserMenuState = {
    open: false,
  };

  render() {
    const {children, userImage} = this.props;
    const {open} = this.state;

    return (
      <Dropdown
        className="main-nav-avatar"
        isOpen={open}
        aria-labelledby="account-menu"
        toggle={this.toggleAccountMenu}
      >
        <a
          href="javascript:void(0)"
          title="Open account menu"
          id="account-menu"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
          onClick={this.toggleAccountMenu}
        >
          {userImage}
        </a>

        <Spinner className="main-nav-spinner" />

        <DropdownMenu right>{children}</DropdownMenu>
      </Dropdown>
    );
  }

  toggleAccountMenu = () => {
    this.setState({open: !this.state.open});
  }
}