<script lang="ts">
  import Paywall from "../paywall/Paywall.svelte";
  import type { CompleteWorkflowNavigateArgs } from "../../types/components/button";
  import type { ColorScheme } from "../../types/colors";
  import type { InitialInputSelections } from "../../stores/inputValidation";
  import type { OnComponentInteraction } from "../../types/paywall-component-interaction";
  import type { WorkflowScreen } from "../../types/workflow";
  import type { PackageInfo, VariableDictionary } from "../../types/variables";
  import type { WalletButtonRender } from "../../types/wallet";
  import type { UIConfig } from "../../types/ui-config";
  import type { ReservedAttribute } from "../../types/components/input-text";
  interface Props {
    paywallComponents: WorkflowScreen | null | undefined;
    selectedLocale?: string;
    uiConfig: UIConfig;
    globalVariables?: VariableDictionary;
    onActionTriggered?: (actionId: string) => void;
    onComponentInteraction?: OnComponentInteraction;
    onPurchaseClicked?: (
      packageId: string,
      actionId: string,
    ) => void | Promise<void>;
    onBackClicked?: () => void;
    onClose?: () => void;
    containerId?: string;
    maxContentWidth?: string;
    variablesPerPackage?: Record<string, VariableDictionary>;
    infoPerPackage?: Record<string, PackageInfo>;
    initialInputSelections?: InitialInputSelections;
    onInputChanged?: (
      fieldId: string,
      value: string,
      actionId?: string,
    ) => void;
    onReservedAttributeChanged?: (
      reservedAttribute: ReservedAttribute,
      value: string,
    ) => void;
    onCompleteWorkflowNavigate?: (
      args: CompleteWorkflowNavigateArgs,
    ) => void | Promise<void>;
    onNavigateToUrlClicked?: (url: string) => void;
    onRestorePurchasesClicked?: () => void;
    onVisitCustomerCenterClicked?: () => void;
    walletButtonRender?: WalletButtonRender;
    safeAreaFallbackColor?: ColorScheme | null;
  }
  const {
    paywallComponents,
    selectedLocale = "en_US",
    uiConfig,
    globalVariables = {},
    onActionTriggered,
    onComponentInteraction,
    onPurchaseClicked,
    onBackClicked,
    onClose,
    containerId = "screen-container",
    maxContentWidth,
    variablesPerPackage,
    infoPerPackage,
    initialInputSelections = {},
    onInputChanged,
    onReservedAttributeChanged,
    onCompleteWorkflowNavigate,
    onNavigateToUrlClicked,
    onRestorePurchasesClicked,
    onVisitCustomerCenterClicked,
    walletButtonRender,
    safeAreaFallbackColor,
  }: Props = $props();
</script>

<div id={containerId} class="paywall-container">
  {#if paywallComponents}
    <Paywall
      paywallData={paywallComponents}
      {selectedLocale}
      {uiConfig}
      {variablesPerPackage}
      {infoPerPackage}
      {globalVariables}
      {maxContentWidth}
      {initialInputSelections}
      onNavigateToUrlClicked={(url: string) => {
        if (onNavigateToUrlClicked) {
          onNavigateToUrlClicked(url);
        } else {
          window.open(url, "_blank");
        }
      }}
      {onCompleteWorkflowNavigate}
      onVisitCustomerCenterClicked={() => onVisitCustomerCenterClicked?.()}
      {onBackClicked}
      {onClose}
      onRestorePurchasesClicked={() => onRestorePurchasesClicked?.()}
      onActionTriggered={(actionId: string) => {
        onActionTriggered?.(actionId);
      }}
      {onComponentInteraction}
      {onPurchaseClicked}
      {onInputChanged}
      {onReservedAttributeChanged}
      {walletButtonRender}
      {safeAreaFallbackColor}
      onError={(error) => {
        console.error("Paywall error:", error);
      }}
    />
  {:else}
    <div>
      <p>No paywall data provided</p>
    </div>
  {/if}
</div>
