import * as React from 'react';
import { Component, ReactNode } from 'react';
import { AmplitudeEvents } from '../../events/amplitudeEvents';
import playcard from '../../images/ns-playcard.jpg';
import { NonstopHomeNonstopVideoCompleteEvent } from '../../models/amplitude/NonstopHomeNonstopVideoCompleteEvent';
import { NonstopHomeNonstopVideoEndEvent } from '../../models/amplitude/NonstopHomeNonstopVideoEndEvent';
import { NonstopHomeNonstopVideoStartEvent } from '../../models/amplitude/NonstopHomeNonstopVideoStartEvent';
import { NonstopEarnResult } from '../../models/nonstophome/nonstopEarnResult';
import { NonstopHomeTab } from '../../models/nonstophome/nonstophometab';
import { NonstopHowItWorksResult } from '../../models/nonstophome/nonstopHowItWorksResult';
import eventEmitter from '../../services/eventEmitter';
import { LearnMore } from './LearnMore';
import { NonstopHomeHeader } from './NonstopHomeHeader';
import { NonstopHomeNavBar } from './NonstopHomeNavBar';
import { NonstopSpendCostSummary } from './NonstopSpendCostSummary';
import { VideoPlayer } from './VideoPlayer';

interface INonstopHowItWorksProps {
    howItWorks: NonstopHowItWorksResult;
    earnResult: NonstopEarnResult;
}

export class NonstopHowItWorks extends Component<INonstopHowItWorksProps, {}> {

    private videoContent: string = 'Nonstop: Watch & Earn Points';
    private videoContentType: string = 'Promo';
    private videoLocation: string = 'Nonstop Home';

    public render(): ReactNode {
        const video = {
            autoplay: false,
            controls: true,
            poster: playcard,
            sources: [{
                src: this.props.howItWorks.howItWorksUrl || 'https://freeform.azureedge.net/showms/nonstop/ns-promo.mp4',
                type: 'video/mp4',
            }],
        };

        return [
            <div className='ns-history-header' key={'header'}>
                <NonstopHomeHeader
                    homeDetails={this.props.earnResult}
                />
                <NonstopHomeNavBar currentTab={NonstopHomeTab.HowItWorks} />
            </div>,
            <div className='ns-section-video' key={'videoPlayer'}>
                <div className='ns-container'>
                    <div className='ns-row'>
                        <div className='ns-col-sm-12'>
                            <VideoPlayer
                                videoJsOptions={video}
                                customControls={false}
                                controlBar={true}
                                onStarted={() => this.onStarted()}
                                onEnded={() => this.onEnded()}
                                onCompleted={() => this.onCompleted()}
                                videoTitle={'How it Works'}
                                customClass={'ns-how-it-works-video'}
                            />
                        </div>
                    </div>
                </div>
            </div>,
            <NonstopSpendCostSummary costSummary={this.props.howItWorks.spendCostSummary} earnSummary={this.props.howItWorks.earnPointsSummary} key={'spendCostSummary'} />,
            <LearnMore learnMoreUrl={this.props.howItWorks.learnMoreUrl} key={'learnMore'} />,
        ];
    }

    private onStarted() {
            eventEmitter.broadcastEvent(AmplitudeEvents.NonstopHomeNonstopVideoStart, new NonstopHomeNonstopVideoStartEvent(this.videoContent, '', this.videoContentType, '', 0, this.videoLocation));
    }

    private async onCompleted() {
        eventEmitter.broadcastEvent(AmplitudeEvents.NonstopHomeNonstopVideoComplete, new NonstopHomeNonstopVideoCompleteEvent(this.videoContent, '', this.videoContentType, '', 0, this.videoLocation));
    }

    private onEnded() {
        eventEmitter.broadcastEvent(AmplitudeEvents.NonstopHomeNonstopVideoEnd, new NonstopHomeNonstopVideoEndEvent(this.videoContent, '', this.videoContentType, '', 0, this.videoLocation));
    }

}