import { Component, ReactNode } from 'react';
import * as React from 'react';
import { HistoryItem } from '../../models/nonstophome/historyItem';
import { HistoryListItem } from './HistoryListItem';
import { NonstopLifetimeSummaryBar } from './NonstopLifetimeSummaryBar';

interface IHistoryListProps {
    historyItems: HistoryItem[];
    totalPointsEarned: string;
    totalPointsSpent: string;
}

export class HistoryList extends Component<IHistoryListProps, {}> {

    public render(): ReactNode {
        return (
            <div className='ns-history-fullwidth'>
                <NonstopLifetimeSummaryBar
                    totalPointsEarned={this.props.totalPointsEarned}
                    totalPointsSpent={this.props.totalPointsSpent}
                />
                <div className='ns-container'>
                    <section className='nonstop-history'>
                        <div className='nonstop-history__container'>
                        {this.props.historyItems.map((col, index) => <HistoryListItem historyItem={col} key={col.timestamp + index} />)}
                            <div className='nonstop-history__block nsfirst'>
                                <div className='nonstop-history__img'>
                                    <span>0</span>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        );
    }
}