import { Component, ReactNode } from 'react';
import * as React from 'react';
import boltsBgFade from '../../images/bolts-bg-fade.png';
import minusYellow from '../../images/minus.svg';
import iconWarning from '../../images/ns-icon-limit.png';
import plusYellow from '../../images/plus.svg';
import { HistoryItem } from '../../models/nonstophome/historyItem';
import { TransactionType } from '../../models/nonstophome/transactionType';
import { TaskType } from '../../models/tasks/taskType';

interface IHistoryListItemProps {
    historyItem: HistoryItem;
}

export class HistoryListItem extends Component<IHistoryListItemProps, {}> {

    public render(): ReactNode {
        return this.getHistoryListItemDetailsByTransactionType(this.props.historyItem);
    }

    private getDefaultLayout(historyItem: HistoryItem): ReactNode {
        return (
            <div className='nonstop-history__block'>
                <div className='nonstop-history__img'>
                    <span className={'digit-' + (historyItem.pointsAtThatMoment + '').length + ''}>{historyItem.pointsAtThatMomentDisplay}</span>
                </div>
                <div className='nonstop-history__content animated faster'>
                    <p className='nonstop-history__content--date'>
                        {historyItem.date} / {historyItem.time}
                    </p>
                    <h3>{historyItem.title}</h3>
                    <p>{historyItem.transactionType === TransactionType.Credit ? 'You earned' : 'You spent'} <img className='ns-icon-points' src={historyItem.transactionType === TransactionType.Credit ? plusYellow : minusYellow} /><span>{historyItem.pointsChangeDisplay} points</span> {historyItem.description}</p>
                </div>
                <div className='nonstop-history__bg'>
                    <img src={boltsBgFade} />
                </div>
            </div>
        );
    }

    private getDailyLimitLayout(historyItem: HistoryItem): ReactNode {
        return (
            <div className='nonstop-history__block nonstop-history-limit-reached'>
                    <div className='nonstop-history__img ns-no-border'>
                        <img src={iconWarning} className='ns-warning-icon img-fluid' />
                    </div>
                    <div className='nonstop-history__content ns-history-yellow animated faster'>
                        <p className='nonstop-history__content--date'>{historyItem.title}</p>
                        <h3>{historyItem.title}</h3>
                        <p>{historyItem.rawDescription}</p>
                    </div>
            </div>
        );
    }

    private getHistoryListItemDetailsByTransactionType(historyItem: HistoryItem): ReactNode {
        switch (historyItem.transactionType) {
            case TransactionType.Debit:
                return this.getDefaultLayout(historyItem);
            case TransactionType.Credit:
                return this.getHistoryListItemDetailsByTaskType(historyItem);
        }
    }

    private getHistoryListItemDetailsByTaskType(historyItem: HistoryItem): ReactNode {
        switch (historyItem.task) {
            case TaskType.DailyLimit:
                return this.getDailyLimitLayout(historyItem);
            default:
                return this.getDefaultLayout(historyItem);
        }
    }
}