<script lang="ts">
  import {
    getHtmlFromMarkdown,
    getTextComponentStyles,
    getTextWrapperInlineStyles,
    markdownLinkUrlFromClick,
  } from "./text-utils";
  import Text from "./Text.svelte";
  import { getColorModeContext } from "../../stores/color-mode";
  import { useConditionContext } from "../../stores/condition-context.svelte";
  import { getLocalizationContext } from "../../stores/localization";
  import { getPaywallContext } from "../../stores/paywall";
  import { getOptionalVariablesContext } from "../../stores/variables";
  import type { TextNodeProps } from "../../types/components/text";
  import { resolveOverrideProperties } from "../../utils/style-utils";
  import { replaceVariables } from "../../utils/variable-utils";

  const props: TextNodeProps = $props();

  const { uiConfig, emitComponentInteraction, onNavigateToUrl } =
    getPaywallContext();
  const variables = getOptionalVariablesContext();
  const buildConditionContext = useConditionContext({ state: true });
  const actualProps = $derived.by(() => {
    return {
      ...props,
      ...resolveOverrideProperties(buildConditionContext(), props.overrides),
    };
  });

  const getColorMode = getColorModeContext();
  const colorMode = $derived(getColorMode());

  let textStyles = $derived(
    getTextComponentStyles(colorMode, actualProps, uiConfig.app.fonts),
  );

  const wrapperStyles = $derived(
    getTextWrapperInlineStyles(
      colorMode,
      actualProps,
      actualProps.size,
      actualProps.background_color,
    ),
  );

  const { getLocalizedString } = getLocalizationContext();
  const label = $derived(
    replaceVariables(getLocalizedString(actualProps.text_lid), $variables),
  );

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

  const markdownParsed = $derived(getHtmlFromMarkdown(label));

  const onclick = (event: MouseEvent) => {
    const url = markdownLinkUrlFromClick(event);
    if (!url) {
      return;
    }

    emitComponentInteraction({
      componentType: "text",
      componentName: props.name,
      componentValue: "navigate_to_url",
      componentURL: url,
    });

    onNavigateToUrl?.(url);
  };
</script>

{#if isVisible}
  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
  <span style={wrapperStyles} {onclick} data-testid="text">
    <Text style={textStyles} component="span">
      {@html markdownParsed}
    </Text>
  </span>
{/if}
