import { inject, observer } from 'mobx-react';
import React from 'react';
import { AppStore } from '../../stores/app.store';
import './navbar.scss';

interface IProps {
  appStore?: AppStore;
}

@inject('appStore')
@observer
export class Navbar extends React.Component<IProps, any> {
  constructor(props: IProps) {
    super(props);
  }

  onLeagueSelect = (event: any) => {
    this.props.appStore!.setActiveLeague(event.target.value);
  };

  onStashSelect = (event: any) => {
    this.props.appStore!.loadItems(event.target.value);
  };

  renderStashTabSelector() {
    const { stashTabs } = this.props.appStore!;
    if (stashTabs.length < 1) {
      return null;
    }
    return (
      <select defaultValue={stashTabs[0].n} onChange={this.onStashSelect}>
        {stashTabs.map((v, k) => (
          <option key={k} value={k}>
            {v.n}
          </option>
        ))}
      </select>
    );
  }

  renderLeagueSelector() {
    const { activeLeague, leagues } = this.props.appStore!;
    if (!leagues || !activeLeague) {
      return null;
    }

    return (
      <select onChange={this.onLeagueSelect} defaultValue={activeLeague.id}>
        {leagues!.map((l, k) => {
          return (
            <option key={k} value={l.id}>
              {l.id}
            </option>
          );
        })}
      </select>
    );
  }

  render() {
    return (
      <div className="navbar">
        {this.renderLeagueSelector()}
        {this.renderStashTabSelector()}
        <button onClick={() => this.props.appStore!.resetState()}>Logout</button>
      </div>
    );
  }
}