import React from "react";
import { Add, ArrowUp, Settings } from "@carbon/react/icons";
import { AppTeaserCards } from "./app-teaser-cards";
import { getReadableAppName } from "../../utils/camunda";
import { DefaultStyleWrapper } from "../styles";
import { appTeaserCardsConfig } from "./app-teaser-cards-config";
export const teaserApps = ["tasklist", "operate", "optimize"];
export const C3AppTeaser = ({ appName: app, hasTrialExpired, hasSleepingCluster, canUpgradePlan, canCreateCluster, onClickCta, pricing, }) => {
    const appName = app ? getReadableAppName(app) : "";
    const variants = {
        upgrade: {
            title: `Upgrade your plan${appName ? ` to use ${appName}` : ""}`,
            subtitle: `Creating a cluster and accessing the ${appName} app and features
			are not available with the Modeling plan`,
            ctaText: "Upgrade plan",
            ctaIcon: ArrowUp,
            disabledMessage: "Contact your admin to upgrade",
        },
        manageClusters: {
            title: `Resume your cluster${appName ? ` to use ${appName}` : ""}`,
            subtitle: `The ${appName} app requires an active 
			cluster to run.`,
            ctaText: "Manage clusters",
            ctaIcon: Settings,
            disabledMessage: "Contact your admin to unpause your cluster",
        },
        createClusters: {
            title: `Create a cluster${appName ? ` to use ${appName}` : ""}`,
            subtitle: `The ${appName} app requires a cluster to run.
			Begin by creating your cluster.`,
            ctaText: "Create Cluster",
            ctaIcon: Add,
            disabledMessage: "Contact your admin to create a cluster",
        },
    };
    const variant = hasTrialExpired
        ? variants.upgrade
        : hasSleepingCluster
            ? variants.manageClusters
            : variants.createClusters;
    const currency = pricing?.currency === "€" ? "EUR" : pricing?.currency;
    const locale = navigator.language || "en";
    const price = pricing?.amount &&
        currency &&
        locale &&
        Intl.NumberFormat(locale, {
            style: "currency",
            currency,
            minimumFractionDigits: 0,
            maximumFractionDigits: pricing.amount % 1 === 0 ? 0 : 2,
        }).format(pricing.amount);
    return (React.createElement(DefaultStyleWrapper, null,
        React.createElement(AppTeaserCards, { title: variant.title, subtitle: React.createElement(React.Fragment, null, variant.subtitle), subtext: hasTrialExpired && price
                ? `Plans starting at ${price}${pricing.interval ? `/${pricing.interval}` : ""}`
                : "", cta: {
                action: onClickCta,
                text: variant.ctaText,
                renderIcon: variant.ctaIcon,
                disabled: hasTrialExpired ? !canUpgradePlan : !canCreateCluster,
                disabledMessage: variant.disabledMessage,
            }, cards: appTeaserCardsConfig[app] })));
};
