import { Component, CSSProperties, ReactNode } from 'react';
import * as React from 'react';
import settings from '../../config/settings';
import yellowBolt from '../../images/bolt-yellow-bg.svg';
import { Content } from '../../models/content/content';
import contentService from '../../services/contentService';

interface IChoiceCardProps {
    content: Content | null;
    isContinueWatching: boolean;
    onWatchStandard: (wasSelectedByTimer: boolean) => void;
    onWatchNonstop: () => void;
}

interface IChoiceCardState {
    currentTime: number;
    selectionMade: boolean;
}

export class ChoiceCard extends Component<IChoiceCardProps, IChoiceCardState> {

    private timer: number;

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

    public componentDidMount() {
        this.setState({ currentTime: 0 });
        if (this.props.isContinueWatching) {
            this.timer = (setInterval(() => {
                if (this.state.currentTime === settings.choiceCardTimeout) {
                    clearInterval(this.timer);
                    this.props.onWatchStandard(true);
                } else {
                    this.setState({ currentTime: this.state.currentTime + 1 });
                }
            }, 1 * 1000) as any) as number;
        }
    }

    public render(): ReactNode {
        if (!this.props.content) {
            this.props.onWatchStandard(false);
            return <div></div>;
        } else {
            return (
                <div className='nonstop nonstop-choicecard-container'>
                    <div className='ns-container nonstop-card nonstop-card-container ns-h-100 d-flex'>
                        <div className='bg-choice-card'>
                            <div className='bg-image' style={this.getBackgroundImage(this.props.content)}>
                            </div>
                        </div>
                        <div className='nonstop-choice-card text-center align-self-center justify-content-center ns-w-100 animated fadeIn'>
                            <div className='ns-row'>
                                <div className='ns-col-12'>
                                    {this.props.content.logoImageUrl && <img src={this.props.content.logoImageUrl} className='nonstop-show-logo ns-img-fluid' />}
                                    <h2 className='ns-episode'>{this.getChoiceCardTitle(this.props.content)}</h2>
                                </div>
                            </div>
                            <div className='ns-row'>
                                <div className='ns-col'>
                                    <p className='nonstop-card-mobile-heading nonstop-card-onmobile'>
                                        Earn <img src={yellowBolt} className='ns-icon ns-icon-sm' alt='' /> points by
                                        watching with ads, OR Spend {this.props.content.priceDisplay} {this.getCorrectPluralOfPoints(this.props.content)} to skip ads
                                    </p>
                                </div>
                            </div>
                            <div className='ns-row justify-content-center nonstop-choice-card-ctas ns-d-block-xs'>
                                <div className='ns-col-12 ns-col-sm-5 ns-col-md-5'>
                                    <div className='ns-btn-container ns-float-right'>
                                        <a className='btn-nonstop btn-nonstop-secondary ns-btn-watch-earn' onClick={() => this.onWatchStandardSelected()}>
                                        <div className='ns-timer' style={this.getWidthProperty(this.state && this.state.currentTime)}></div>
                                            {'Watch & Earn'} <i className='fa fa-caret-right'></i>
                                        </a>
                                        <p className='ns-float-right'>Earn <img src={yellowBolt} className='ns-icon ns-icon-sm' alt='' /> points by watching with ads</p>
                                    </div>
                                </div>
                                <div className='ns-col-12 ns-col-sm-auto ns-col-md-auto text-center ns-pl-0 ns-pr-0'>
                                    <div className='circle-outline text-center d-none d-sm-block'>
                                        OR
                                    </div>
                                </div>
                                <div className='ns-col-12 ns-col-sm-1 ns-col-md-5 text-center d-sm-none'>
                                    <hr className='d-block' />
                                </div>
                                <div className='ns-col-12 ns-col-sm-5 ns-col-md-5'>
                                    <div className='ns-btn-container ns-float-left'>
                                        <a className='btn-nonstop' onClick={() => this.onWatchNonstopSelected()}>
                                            Watch Nonstop
                                            <span className='nonstop-cost ns-rounded-left'>
                                                <span className='coin-icon-button'>
                                                    <svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'>
                                                        <title>Logo Vector</title>
                                                        <circle className='coin-icon-filled' cx='6.5' cy='6.5' r='6' />
                                                        <path d='M14,12.79l.69-4.14L10.3,14.17h2.76l-.69,4.13,4.37-5.51Z' transform='translate(-7 -7)' />
                                                    </svg>
                                                </span>
                                                <span className='ns-amount'>{this.props.content.priceDisplay}</span>
                                            </span>
                                        </a>
                                        <p className='ns-float-left'>Spend <img src={yellowBolt} className='ns-icon ns-icon-sm' alt='' /> {this.props.content.priceDisplay} {this.getCorrectPluralOfPoints(this.props.content)} to skip ads</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
    }

    private getChoiceCardTitle(content: Content): string {
        return contentService.getChoiceCardTitle(content);
    }

    private getCorrectPluralOfPoints(content: Content): string {
        return content.price === 1 ? 'point' : 'points';
    }

    private getBackgroundImage(content: Content): CSSProperties {
        return {
            backgroundImage: `url(${content.backgroundImageUrl})`,
        };
    }
    private getWidthProperty(currentTime: number): CSSProperties {
        const width = currentTime === 0 ? 0 : (currentTime / settings.choiceCardTimeout) * 100;
        return {
            width: `${width}%`,
        };
    }

    private onWatchStandardSelected() {
        if (this.state.selectionMade) {
            return;
        }
        this.setState({ selectionMade: true });
        if (this.timer) {
            clearInterval(this.timer);
        }
        this.props.onWatchStandard(false);
    }

    private onWatchNonstopSelected() {
        if (this.state.selectionMade) {
            return;
        }
        this.setState({ selectionMade: true });
        if (this.timer) {
            clearInterval(this.timer);
        }
        this.props.onWatchNonstop();
    }
}