import * as React from 'react';
import { Component, ReactNode } from 'react';
import { RouteComponentProps, withRouter } from 'react-router';
import { AmplitudeEvents } from '../../events/amplitudeEvents';
import { NonstopHomeLinkItemSelectedEvent } from '../../models/amplitude/NonstopHomeLinkItemSelectedEvent';
import { NonstopHomeOtherItemSelectedEvent } from '../../models/amplitude/NonstopHomeOtherItemSelectedEvent';
import { EarnRowItem } from '../../models/nonstophome/earnRowItem';
import { EarnRowItemType } from '../../models/nonstophome/earnRowItemType';
import { NonstopEarnResult } from '../../models/nonstophome/nonstopEarnResult';
import { NonstopHomeTab } from '../../models/nonstophome/nonstophometab';
import { OtherWayToEarn } from '../../models/nonstophome/otherWayToEarn';
import eventEmitter from '../../services/eventEmitter';
import { CodePromoBar } from './CodePromoBar';
import { EarnRowList } from './EarnRowList';
import { LearnMore } from './LearnMore';
import { NonstopHomeHeader } from './NonstopHomeHeader';
import { NonstopHomeNavBar } from './NonstopHomeNavBar';
import { OtherWaysToEarnList } from './OtherWaysToEarnList';

interface INonstopEarnProps extends RouteComponentProps<any> {
    earnResult: NonstopEarnResult;
}

class NonstopEarn extends Component<INonstopEarnProps, {}> {

    constructor(props: INonstopEarnProps) {
        super(props);
    }

    public render(): ReactNode {
        return [
            <div className='nonstop-home-hero' key={'header'}>
                <NonstopHomeHeader
                    homeDetails={this.props.earnResult}
                />
                <NonstopHomeNavBar currentTab={NonstopHomeTab.Earn} />
            </div>,
            <EarnRowList
                rows={this.props.earnResult.rows}
                onSelect={(rowItem) => this.onSelectRowItem(rowItem)}
                key={'earnItems'}
            />,
            this.props.earnResult.showCodeRedemption ? <CodePromoBar changeState={() => this.onSelectCode()} key={'codeRedemption'} /> : '',
            this.props.earnResult.otherWaysToEarn.length ? <OtherWaysToEarnList
                otherWaysToEarn={this.props.earnResult.otherWaysToEarn}
                onSelect={(earnMethod) => this.onSelectOtherWayToEarn(earnMethod)}
                key={'otherWaysToEarnList'}
            /> : '',
            <LearnMore learnMoreUrl={this.props.earnResult.learnMoreUrl} key={'learnMore'} />,
        ];
    }

    private onSelectCode() {
        this.props.history.push('/code');
    }

    private onSelectOtherWayToEarn(earnMethod: OtherWayToEarn) {
        eventEmitter.broadcastEvent(AmplitudeEvents.NonstopHomeOtherItemSelected, new NonstopHomeOtherItemSelectedEvent(earnMethod.title));
        this.props.history.push(`/earn-method/${earnMethod.id}`);
    }

    private onSelectRowItem(rowItem: EarnRowItem) {
        switch (rowItem.type) {
            case EarnRowItemType.Promo:
                this.props.history.push(`/promo/${rowItem.promoId}`);
                break;
            case EarnRowItemType.Link:
                eventEmitter.broadcastEvent(AmplitudeEvents.NonstopHomeLinkItemSelected, new NonstopHomeLinkItemSelectedEvent(rowItem.title, rowItem.description, rowItem.points));
                break;
        }
    }
}

export default withRouter(NonstopEarn);