import * as React from 'react';
import { Component, ReactNode } from 'react';
import { AmplitudeEvents } from '../../events/amplitudeEvents';
import { NonstopHomeNonstopVideoCompleteEvent } from '../../models/amplitude/NonstopHomeNonstopVideoCompleteEvent';
import { NonstopHomeNonstopVideoEndEvent } from '../../models/amplitude/NonstopHomeNonstopVideoEndEvent';
import { NonstopHomeNonstopVideoStartEvent } from '../../models/amplitude/NonstopHomeNonstopVideoStartEvent';
import { NonstopHomeWatchAndEarnItemSelectedEvent } from '../../models/amplitude/NonstopHomeWatchAndEarnItemSelectedEvent';
import { EarnRowItem } from '../../models/nonstophome/earnRowItem';
import { CompletePromoTaskInput } from '../../models/tasks/completePromoTaskInput';
import { TaskType } from '../../models/tasks/taskType';
import dataService from '../../services/dataService';
import eventEmitter from '../../services/eventEmitter';
import userService from '../../services/userService';
import { CloseButton } from './CloseButton';
import { VideoPlayer } from './VideoPlayer';

interface IPromoProps {
    onExit: () => void;
    earnRowItem: EarnRowItem | null;
}

export class Promo extends Component<IPromoProps, {}> {

    public componentDidMount() {
        const rowItem = this.props.earnRowItem;
        if (rowItem) {
            eventEmitter.broadcastEvent(AmplitudeEvents.NonstopHomeWatchAndEarnItemSelected, new NonstopHomeWatchAndEarnItemSelectedEvent(rowItem.title, rowItem.description, rowItem.type, rowItem.promoId, rowItem.points));
        }
    }

    public render(): ReactNode {
        if (!this.props.earnRowItem) {
            this.props.onExit();
            return <div></div>;
        } else {
            return (
                <div className='ns-overlay'>
                    <CloseButton onClick={() => this.onCloseButtonTapped()} />
                    <VideoPlayer
                        videoJsOptions={this.getVideoJsConfig(this.props.earnRowItem)}
                        customControls={true}
                        onStarted={() => this.onStarted()}
                        onEnded={() => this.onEnded()}
                        onThreeSecondsWatched={() => this.triggerTrackingPixel(this.props.earnRowItem ? this.props.earnRowItem.trackingPixelThreeSecondsWatched : undefined)}
                        onCompleted={() => this.onCompleted()}
                        videoTitle={this.props.earnRowItem.title}
                    />
                </div>
            );
        }
    }

    private onStarted() {
        if (this.props.earnRowItem) {
            this.triggerTrackingPixel(this.props.earnRowItem.trackingPixelPromoStarted);
            eventEmitter.broadcastEvent(AmplitudeEvents.NonstopHomeNonstopVideoStart, new NonstopHomeNonstopVideoStartEvent(this.props.earnRowItem.title, this.props.earnRowItem.description, this.props.earnRowItem.type, this.props.earnRowItem.promoId, this.props.earnRowItem.points, ''));
        }
    }

    private async onCompleted() {
        if (this.props.earnRowItem) {
            this.triggerTrackingPixel(this.props.earnRowItem.trackingPixelPromoCompleted);
            const completePromoTask = new CompletePromoTaskInput(TaskType.CompletePromo);
            completePromoTask.promoId = this.props.earnRowItem.promoId;
            eventEmitter.broadcastEvent(AmplitudeEvents.NonstopHomeNonstopVideoComplete, new NonstopHomeNonstopVideoCompleteEvent(this.props.earnRowItem.title, this.props.earnRowItem.description, this.props.earnRowItem.type, this.props.earnRowItem.promoId, this.props.earnRowItem.points, ''));
            await userService.userPerformedTask(completePromoTask, this.props.onExit);
            this.props.onExit();
        }
    }

    private onEnded() {
        if (this.props.earnRowItem) {
            eventEmitter.broadcastEvent(AmplitudeEvents.NonstopHomeNonstopVideoEnd, new NonstopHomeNonstopVideoEndEvent(this.props.earnRowItem.title, this.props.earnRowItem.description, this.props.earnRowItem.type, this.props.earnRowItem.promoId, this.props.earnRowItem.points, ''));
        }
    }

    private onCloseButtonTapped() {
        this.onEnded();
        this.props.onExit();
    }

    private triggerTrackingPixel(trackingPixel: string | undefined) {
        if (trackingPixel) {
            dataService.getFromExternalUrl(trackingPixel);
        }
    }

    private getVideoJsConfig(earnRowItem: EarnRowItem) {
        return {
            autoplay: true,
            controls: false,
            poster: earnRowItem.imageUrl,
            sources: [{
                src: earnRowItem.videoUrl,
                type: 'video/mp4',
            }],
        };
    }
}