// app.js

const { Component, VERSION } = ng.core;
const {Subject, BehaviorSubject, combineLatest, of, from, concat, pipe} = rxjs;
const {map, merge, scan, mergeAll,  multicast, refCount, tap, startWith} = rxjs.operators;



const cleanCardNumber = map( (card) => {
  if (card) {
    return card.replace(/[\s-]/g, "");
  }
});

const expiryParts = map( (expiry) => {
  if (expiry) {
    return expiry.split("-")
  }
});

const validateCard = map( (card)=> {
    if (!card) {
        return "There is no card"
    }
    if (card.length !== 16) {
        return "There should be 16 characters in a card";
    }
});

const validateExpiry = map( (expiry) => {
    if (!expiry) {
        return "There is no expiry. Format  MM-YY";
    }
    if (expiry.length !== 2 || expiry[0].length !== 2 || expiry[1].length !== 2) {
        return "Expirty must be formatted like MM-YY";
    }
});

const validateCVC = map( (cvc) => {
  if (!cvc) {
      return "There is no CVC code";
  }
  if (cvc.length !== 3) {
      return "The CVC must be at least 3 numbers";
  }
  if (isNaN(parseInt(cvc))) {
      return "The CVC must be numbers";
  }
});

function showOnlyWhenBlurredOnce( errorObservable, blurredObservable ){
    const errorEvent = errorObservable.pipe(
        map((error) => {
            if (!error) {
                return {
                    type: "valid"
                }
            } else {
                return {
                    type: "invalid",
                    message: error
                }
            }
        })
    );

    const focusEvents = blurredObservable.pipe(
        map((isBlurred) => {
            if (isBlurred === undefined) {
                return {};
            }
            return isBlurred ? {
                type: "blurred"
            } : {
                type: "focused"
            };
        })
    );

    const valueState = scan( (previous, event) => {
        switch (event.type) {
            case "valid":
                return Object.assign({}, previous, {
                    isValid: true,
                    showCardError: false
                });
            case "invalid":
                return Object.assign({}, previous, {
                    isValid: false,
                    showCardError: previous.hasBeenBlurred
                });
            case "blurred":
                return Object.assign({}, previous, {
                    hasBeenBlurred: true,
                    showCardError: !previous.isValid
                });
            default:
                return previous;
        }
    }, {
        hasBeenBlurred: false,
        showCardError: false,
        isValid: false
    });
    var merged = errorEvent.pipe(merge(focusEvents));
    return merged.pipe( valueState ).pipe( map( state => state.showCardError ) );
}

function isCardInvalid(cardError, expiryError, cvcError){
    return combineLatest(cardError, expiryError, cvcError, function(cardError, expiryError, cvcError) {
        return !!(cardError || expiryError || cvcError)
    })
}

function combineCard(cardNumber, expiry, cvc) {
    return combineLatest(cardNumber, expiry, cvc, function(cardNumber, expiry, cvc) {
        return {cardNumber , expiry , cvc};
    })
}

function paymentPromises(payClicked, card) {
    return combineLatest(payClicked, card, (payClicked, card) => {
        if (payClicked) {
            console.log("Asking for token with", card);
            return new Promise(function(resolve) {
                setTimeout(function() {
                    resolve(1000);
                }, 2000);
            });
        }
    });
}

const paymentStatusObservable = pipe(
	map( (promise) => {
		console.log("paymentStatusObservable map", promise); 
			if (promise) {
					// STREAM<STATUS>
					var later = from(promise).pipe(
						map((value) => {
							console.log("resolved promise!")
							return {
								status: "resolved",
								value: value
							};
						})
					);

					var res = concat(
							of({
									status: "pending"
							}),
							later
					);
					return res;
			} else {
					// STREAM
					return of({
							status: "waiting"
					});
			}
	}),
	startWith([{
		status: "waiting"
	}])
);


function disablePaymentButton(isCardInvalid, paymentStatus){
	return combineLatest(isCardInvalid, paymentStatus, function(isCardInvalid, paymentStatus) {
		return (isCardInvalid === true) || !paymentStatus || paymentStatus.status === "pending";
	})
}

var log = function(name){
	return tap(ev => console.log(name, ev))
}

@Component({
  selector: 'my-app',
  template: `
   <form (submit)="pay($event)">

    <div class="message"
        *ngIf="(showCardError | async)">{{ (cardError | async) }}</div>

    <div class="message"
        *ngIf="(showExpiryError | async)">{{ (expiryError | async) }}</div>

    <div class="message"
        *ngIf="(showCVCError | async)">{{ (cvcError | async) }}</div>

    <input type="text" name="number" placeholder="Card Number"
        (input)="userCardNumber.next( $event.target.value )"
        (blur)="userCardNumberBlurred.next( true )"
        [class.is-error]="showCardError | async"/>

    <input type="text" name="expiry" placeholder="MM-YY"
        (input)="userExpiry.next( $event.target.value )"
        (blur)="userExpiryBlurred.next( true )"
        [class.is-error]="showExpiryError | async"/>

    <input type="text" name="cvc" placeholder="CVC"
        (input)="userCVC.next( $event.target.value )"
        (blur)="userCVCBlurred.next( true )"
        [class.is-error]="showCVCError | async"/>

    <button [disabled]="disablePaymentButton | async">
           {{ ( (paymentStatus | async)?.status === "pending" ) ? "Paying" : "Pay" }}
    </button>
   </form>
  `
})
class AppComponent {  
  userCardNumber = new BehaviorSubject<String>();
  userCardNumberBlurred = new Subject<Boolean>();

  userExpiry = new BehaviorSubject<Array>();
  userExpiryBlurred = new Subject<Boolean>();

  userCVC = new BehaviorSubject<String>();
  userCVCBlurred = new Subject<Boolean>();

  payClicked = new Subject();

  constructor() {
    this.cardNumber = this.userCardNumber.pipe(cleanCardNumber);
    this.cardError = this.cardNumber.pipe(validateCard);
    this.showCardError = showOnlyWhenBlurredOnce(this.cardError, this.userCardNumberBlurred);

    this.expiry = this.userExpiry.pipe(expiryParts);
    this.expiryError = this.expiry.pipe(validateExpiry);
    this.showExpiryError = showOnlyWhenBlurredOnce(this.expiryError, this.userExpiryBlurred);

    this.cvc = this.userCVC;
    this.cvcError = this.cvc.pipe(validateCVC);
    this.showCVCError = showOnlyWhenBlurredOnce(this.cvcError, this.userCVCBlurred);

    this.isCardInvalid = isCardInvalid(this.cardError, this.expiryError, this.cvcError);
	
		
    this.card = combineCard(this.cardNumber, this.expiry, this.cvc)
			.pipe(multicast(new Subject()), refCount());
		
		
    const payments = paymentPromises(this.payClicked, this.card)
			.pipe( log("payment") );
		//payments.subscribe( (data) => {console.log("subscribe payments",data)})
		
		const paymentsObservables = payments.pipe(paymentStatusObservable);
		//paymentsObservables.subscribe( (data) => {console.log("subscribe paymentsObservables",data)})
		
    this.paymentStatus = paymentsObservables.pipe( mergeAll() ).pipe(multicast(new Subject()), refCount());
		
		this.disablePaymentButton = disablePaymentButton(this.isCardInvalid, this.paymentStatus);
		
  }
  pay(event){
		console.log("PAY CLICKED");
    event.preventDefault();
    this.payClicked.next(true);  //a
		console.log("EMITTED");
  }
}

// main.js
const { BrowserModule } = ng.platformBrowser;
const { NgModule } = ng.core;
const { CommonModule } = ng.common;

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: []
})
class AppModule {}

const { platformBrowserDynamic } = ng.platformBrowserDynamic;

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));