import { Component, ReactNode } from 'react';
import * as React from 'react';
import settings from '../../config/settings';
import { RewardAnimation } from '../../models/rewardAnimations/rewardAnimation';
import { VideoPlayer } from '../nonstophome/VideoPlayer';
import { IRewardCardProps } from './rewardCardProps';

export class VideoRewardCard extends Component<IRewardCardProps, {}> {

    public componentDidMount() {
        setTimeout(() => {
            this.props.onFinish();
        }, settings.videoRewardErrorTimeout);
    }

    public render(): ReactNode {
        return (
            <div className='ns-overlay'>
                <VideoPlayer
                    videoJsOptions={this.getRewardVideoConfig(this.props.animation)}
                    customControls={false}
                    videoTitle={''}
                    onStarted={() => { }}
                    onEnded={() => { }}
                    onCompleted={() => this.props.onFinish()}
                />
            </div>
        );
    }

    private getRewardVideoConfig(animation: RewardAnimation) {
        return {
            autoplay: true,
            controls: false,
            mute: true,
            sources: [{
                src: animation.videoUrl,
                type: 'video/mp4',
            }],
        };
    }
}