import { Component, ReactNode } from 'react';
import * as React from 'react';
import boltYellowBg from '../../images/bolt-yellow-bg.svg';
import tickYellow from '../../images/icon-tick-filled.svg';
import nsPLay from '../../images/ns-play.png';
import { EarnRowItem } from '../../models/nonstophome/earnRowItem';

interface IEarnItemProps {
    item: EarnRowItem;
    onSelect: (rowItem: EarnRowItem) => void;
}

export class EarnItem extends Component<IEarnItemProps, {}> {
    public render(): ReactNode {
        return (
            <div className='ns-col-md-4'>
                <a href={this.props.item.webUrl} target={this.props.item.webUrl ? '_blank' : undefined} onClick={() => this.props.onSelect(this.props.item)}>
                    <div className='nonstop-video-grid__inner--item'>
                        <div className='nonstop-video-grid-image'>
                            {!this.props.item.webUrl ? <span className='ns-play'><img src={nsPLay}/></span> : ''}
                            <img src={this.props.item.imageUrl} alt={this.props.item.title} className='img-fluid ns-w-100' />
                            <div className={this.props.item.alreadyViewed ? 'nonstop-video-grid-label viewed' : 'nonstop-video-grid-label'}>
                            <span className='ns-earn'>EARN</span> <img src={this.props.item.alreadyViewed ? tickYellow : boltYellowBg} className='ns-icon ns-icon-sm' />
                                <span>{this.props.item.alreadyViewed ? this.props.item.alreadyViewedText : this.props.item.pointsDisplay}</span>
                            </div>
                        </div>
                        <div className='nonstop-video-grid-meta'>
                            <h3>{this.props.item.title}</h3>
                            <p>{this.props.item.description}</p>
                        </div>
                    </div>
                </a>
            </div>
        );
    }
}