import * as _ from 'lodash';
import { inject, observer } from 'mobx-react';
import React from 'react';
import { IItem, IItemPrice } from '../../model';
import { AppStore } from '../../stores/app.store';
import { Navbar } from '../navbar/navbar';
import { PriceListItem } from '../price-list-item/price-list-item';
import './home.scss';

interface IProps {
  appStore?: AppStore;
}

interface IState {}

@inject('appStore')
@observer
export class Home extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {};
  }

  onPriceUpdate = (id: string, itemPrice: IItemPrice) => {
    this.props.appStore!.updateItemPrice(id, itemPrice);
  };

  renderItemList = () => {
    const { activeLeague, stashItems } = this.props.appStore!;
    const orderedItems = _.orderBy(
      stashItems,
      (i: IItem) => {
        return i.itemPrice && i.itemPrice.recommendedPrice ? parseFloat(i.itemPrice.recommendedPrice) : 0;
      },
      ['desc'],
    );
    return orderedItems.map((v, k) => {
      return <PriceListItem key={k} item={v} league={activeLeague!.id} onPriceUpdate={this.onPriceUpdate} />;
    });
  };

  render() {
    return (
      <div>
        <Navbar />
        <div style={{ padding: '10px' }}>{this.renderItemList()}</div>
      </div>
    );
  }
}