<script lang="ts">
  import { getTimelineInlineStyles } from "./timeline-utils";
  import TimelineItem from "./TimelineItem.svelte";
  import { useConditionContext } from "../../stores/condition-context.svelte";
  import type { TimelineProps } from "../../types/components/timeline";
  import { css } from "../../utils/base-utils";
  import { resolveOverrideProperties } from "../../utils/style-utils";
  const props: TimelineProps = $props();
  const buildConditionContext = useConditionContext();

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

  const isVisible = $derived(visible !== false);

  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}
