import { html, LitElement } from "lit";
import { customElement, state } from "lit/decorators.js";
import { createCustomCurrencyCheckout } from "../Api";
import { translateText } from "../Utils";
import "./CosmeticContainer";
import "./PlutoniumIcon";
import "./PurchaseButton";
// Fixed rate: 20 plutonium = $1.00 (5 cents each). Bounds and rate are
// enforced server-side; these are for UX only.
const MIN_PLUTONIUM = 20;
const MAX_PLUTONIUM = 2000;
@customElement("custom-currency-card")
export class CustomCurrencyCard extends LitElement {
/** Always a clamped integer in [MIN_PLUTONIUM, MAX_PLUTONIUM]. */
@state() private amount = 100;
createRenderRoot() {
return this;
}
private clamp(value: number): number {
if (!Number.isFinite(value)) return MIN_PLUTONIUM;
return Math.min(MAX_PLUTONIUM, Math.max(MIN_PLUTONIUM, Math.floor(value)));
}
private get priceDollars(): string {
return (this.amount / 20).toFixed(2);
}
private onSlider(e: Event) {
this.amount = this.clamp(Number((e.target as HTMLInputElement).value));
}
private onInputChange(e: Event) {
this.amount = this.clamp(Number((e.target as HTMLInputElement).value));
}
private buy = async () => {
const url = await createCustomCurrencyCheckout(this.amount);
if (url === false) {
alert(translateText("store.checkout_failed"));
return;
}
window.location.href = url;
};
render() {
const price = `$${this.priceDollars}`;
return html`
`;
}
}