<script lang="ts">
  import { getTimelineInlineStyles } from "./timeline-utils";
  import TimelineItem from "./TimelineItem.svelte";
  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";
  import { getPaywallContext } from "../../stores/paywall";
  import { getSelectedStateContext } from "../../stores/selected";
  import { getOptionalVariablesContext } from "../../stores/variables";
  import type { TimelineProps } from "../../types/components/timeline";
  import { css } from "../../utils/base-utils";
  import {
    evaluateVisibilityConditions,
    getActiveStateProps,
  } from "../../utils/style-utils";

  const props: TimelineProps = $props();
  const selectedState = getSelectedStateContext();
  const packageInfo = getOptionalPackageInfoContext();
  const { selectedPackageId } = getPaywallContext();
  const variables = getOptionalVariablesContext();

  const {
    items,
    text_spacing,
    item_spacing,
    column_gutter,
    icon_alignment,
    size,
    padding,
    margin,
    ...restProps
  } = $derived.by(() => {
    return {
      ...props,
      ...getActiveStateProps($selectedState, props.overrides),
    };
  });

  const isVisible = $derived(
    evaluateVisibilityConditions(
      {
        selectedPackageId: $selectedPackageId,
        packageInfo: $packageInfo,
        variables: $variables ?? {},
      },
      props.overrides,
      props.visible,
    ),
  );

  const timelineStyles = $derived(
    css(
      getTimelineInlineStyles({
        items,
        text_spacing,
        item_spacing,
        column_gutter,
        icon_alignment,
        size,
        padding,
        margin,
        ...restProps,
      }),
    ),
  );
</script>

{#if isVisible && items.length}
  <div style={timelineStyles}>
    {#each items as item (item.id)}
      <TimelineItem {...item} {text_spacing} {item_spacing} />
    {/each}
  </div>
{/if}
