<script lang="ts">
  import Stack from "../stack/Stack.svelte";
  import { getPaywallContext } from "../../stores/paywall";
  import { setSelectedStateContext } from "../../stores/selected";
  import {
    getVariablesContext,
    setVariablesContext,
  } from "../../stores/variables";
  import type { PackageProps } from "../../types/components/package";
  import { untrack } from "svelte";
  import { writable } from "svelte/store";
  import {
    getPackageInfoContext,
    setPackageInfoContext,
  } from "../../stores/packageInfo";
  import type { PackageInfo, VariableDictionary } from "../../types/variables";

  const { stack, package_id, is_selected_by_default, name }: PackageProps =
    $props();

  const {
    defaultPackageId,
    emitComponentInteraction,
    selectedPackageId,
    variablesPerPackage,
    baseVariables,
    infoPerPackage,
  } = getPaywallContext();

  // When a package with is_selected_by_default appears, select it.
  // This handles tab switches where a new default package is shown.
  // selectedPackageId is deliberately not tracked so that manually
  // selecting another package does not re-trigger this effect and
  // snap selection back to the default.
  $effect(() => {
    if (is_selected_by_default) {
      const newPackageId = package_id;
      untrack(() => {
        $selectedPackageId = newPackageId;
      });
    }
  });

  // Use $derived to make isSelected reactive to package_id changes
  const isSelected = $derived($selectedPackageId === package_id);
  const selectedStateStore = writable(isSelected);
  $effect(() => {
    selectedStateStore.set(isSelected);
  });
  setSelectedStateContext(selectedStateStore);

  const onPackageClick = () => {
    const originPackageId = $selectedPackageId;
    if (originPackageId === package_id) {
      return;
    }

    $selectedPackageId = package_id;

    emitComponentInteraction({
      componentType: "package",
      componentName: name,
      componentValue: package_id,
      originPackageId,
      destinationPackageId: package_id,
      defaultPackageId,
    });
  };

  // Use $derived to make variables reactive to package_id changes
  const fallbackVariables = getVariablesContext();
  const computedVariables = $derived.by(() => {
    const packageVariables = $variablesPerPackage?.[package_id];
    if (packageVariables === undefined) {
      return $fallbackVariables;
    }

    return {
      ...$baseVariables,
      ...packageVariables,
    };
  });
  const variablesStore = writable<VariableDictionary | undefined>(
    computedVariables,
  );
  $effect(() => {
    variablesStore.set(computedVariables);
  });
  setVariablesContext(variablesStore);

  // Use $derived to make packageInfo reactive to package_id changes
  const fallbackPackageInfo = getPackageInfoContext();
  const computedPackageInfo = $derived(
    $infoPerPackage?.[package_id] ?? $fallbackPackageInfo,
  );
  const packageInfoStore = writable<PackageInfo | undefined>(
    computedPackageInfo,
  );
  $effect(() => {
    packageInfoStore.set(computedPackageInfo);
  });
  setPackageInfoContext(packageInfoStore);
</script>

<Stack {...stack} onclick={onPackageClick} />
