import { kefir as Kefir, StacheElement } from "//unpkg.com/can@pre/ecosystem.mjs";

class CCPayment extends StacheElement {
	static view = `
		<form on:submit="this.pay(scope.event)">
			{{# if(this.showCardError.value) }}
				<div class="message">{{ this.cardError.value }}</div>
			{{/ if }}

			{{# if(this.showExpiryError.value) }}
				<div class="message">{{ this.expiryError.value }}</div>
			{{/ if }}

			{{# if(this.showCVCError.value) }}
				<div class="message">{{ this.cvcError.value }}</div>
			{{/ if }}

			<input type="text" name="number" placeholder="Card Number"
					on:input:value:to="this.userCardNumber.value"
					on:blur="this.userCardNumberBlurred.emitter.value(true)"
					{{# if(this.showCardError.value) }}class="is-error"{{/ if }}>

			<input type="text" name="expiry" placeholder="MM-YY"
					on:input:value:to="this.userExpiry.value"
					on:blur="this.userExpiryBlurred.emitter.value(true)"
					{{# if(this.showExpiryError.value) }}class="is-error"{{/ if }}>
	
			<input type="text" name="cvc" placeholder="CVC"
					on:input:value:to="this.userCVC.value"
					on:blur="this.userCVCBlurred.emitter.value(true)"
					{{# if(this.showCVCError.value) }}class="is-error"{{/ if }}>

			<button disabled:from="this.disablePaymentButton.value">
				{{# eq(this.paymentStatus.value.status, "pending") }}Paying{{ else }}Pay{{/ eq }} \${{ this.amount.value }}
			</button>
		</form>
  `;

	static props = {
		amount: {
			get default() {
				return Kefir.constant(1000);
			}
		},

		userCardNumber: {
			get default() {
				return Kefir.emitterProperty();
			}
		},

		userCardNumberBlurred: {
			get default() {
				return Kefir.emitterProperty();
			}
		},

		userExpiry: {
			get default() {
				return Kefir.emitterProperty();
			}
		},

		userExpiryBlurred: {
			get default() {
				return Kefir.emitterProperty();
			}
		},

		userCVC: {
			get default() {
				return Kefir.emitterProperty();
			}
		},

		userCVCBlurred: {
			get default() {
				return Kefir.emitterProperty();
			}
		},

		payClicked: {
			get default() {
				return Kefir.emitterProperty();
			}
		},

		get cardNumber() {
			return this.userCardNumber.map(card => {
				if (card) {
					return card.replace(/[\s-]/g, "");
				}
			});
		},

		get cardError() {
			return this.cardNumber.map(this.validateCard);
		},

		get showCardError() {
			return this.showOnlyWhenBlurredOnce(
				this.cardError,
				this.userCardNumberBlurred
			);
		},

		// EXPIRY
		get expiry() {
			return this.userExpiry.map(expiry => {
				if (expiry) {
					return expiry.split("-");
				}
			});
		},

		get expiryError() {
			return this.expiry.map(this.validateExpiry).toProperty();
		},

		get showExpiryError() {
			return this.showOnlyWhenBlurredOnce(
				this.expiryError,
				this.userExpiryBlurred
			);
		},

		// CVC
		get cvc() {
			return this.userCVC;
		},

		get cvcError() {
			return this.cvc.map(this.validateCVC).toProperty();
		},

		get showCVCError() {
			return this.showOnlyWhenBlurredOnce(this.cvcError, this.userCVCBlurred);
		},

		get isCardInvalid() {
			return Kefir.combine(
				[this.cardError, this.expiryError, this.cvcError],
				(cardError, expiryError, cvcError) => {
					return !!(cardError || expiryError || cvcError);
				}
			);
		},

		get card() {
			return Kefir.combine(
				[this.cardNumber, this.expiry, this.cvc],
				(cardNumber, expiry, cvc) => {
					return { cardNumber, expiry, cvc };
				}
			);
		},

		// STREAM< Promise<Number> | undefined >
		get paymentPromises() {
			return Kefir.combine(
				[this.payClicked],
				[this.card],
				(payClicked, card) => {
					if (payClicked) {
						console.log("Asking for token with", card);
						return new Promise(resolve => {
							setTimeout(() => {
								resolve(1000);
							}, 2000);
						});
					}
				}
			);
		},

		// STREAM< STREAM<STATUS> >
		// This is a stream of streams of status objects.
		get paymentStatusStream() {
			return this.paymentPromises.map(promise => {
				if (promise) {
					// STREAM<STATUS>
					return Kefir.concat([
						Kefir.constant({
							status: "pending"
						}),
						Kefir.fromPromise(promise).map(value => {
							return {
								status: "resolved",
								value: value
							};
						})
					]);
				} else {
					// STREAM
					return Kefir.constant({
						status: "waiting"
					});
				}
			});
		},

		// STREAM<STATUS> //{status: "waiting"} | {status: "resolved"}
		get paymentStatus() {
			return this.paymentStatusStream.flatMap().toProperty();
		},

		get disablePaymentButton() {
			return Kefir.combine(
				[this.isCardInvalid, this.paymentStatus],
				(isCardInvalid, paymentStatus) => {
					return (
						isCardInvalid === true ||
						!paymentStatus ||
						paymentStatus.status === "pending"
					);
				}
			).toProperty(() => {
				return true;
			});
		}
	};

	pay(event) {
		event.preventDefault();
		this.payClicked.emitter.value(true);
	}

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

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

	validateCVC(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";
		}
	}

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

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

		return Kefir.merge([errorEvent, focusEvents])
			.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
				}
			)
			.map(state => {
				return state.showCardError;
			});
	}
}

customElements.define("cc-payment", CCPayment);