import * as React from 'react';
import { Component, ReactNode } from 'react';
import { NonstopEarnResult } from '../../models/nonstophome/nonstopEarnResult';
import { NonstopHistoryResult } from '../../models/nonstophome/nonstopHistoryResult';
import { NonstopHomeTab } from '../../models/nonstophome/nonstophometab';
import { HistoryList } from './HistoryList';
import { NonstopHomeHeader } from './NonstopHomeHeader';
import { NonstopHomeNavBar } from './NonstopHomeNavBar';

interface INonstopHistoryProps {
  userHistory: NonstopHistoryResult;
  earnResult: NonstopEarnResult;
}

export class NonstopHistory extends Component<INonstopHistoryProps, {}> {

  public render(): ReactNode {
    return [
      <div className='ns-history-header' key={'header'}>
        <NonstopHomeHeader
          homeDetails={this.props.earnResult}
        />
        <NonstopHomeNavBar currentTab={NonstopHomeTab.History} />
      </div>,
      <HistoryList historyItems={this.props.userHistory.history} key={'list'} totalPointsEarned={this.props.userHistory.totalPointsEarnedDisplay} totalPointsSpent={this.props.userHistory.totalPointsSpentDisplay} />,
    ];
  }
}
