<script lang="ts">
  import {
    getHtmlFromMarkdown,
    getTextComponentStyles,
    getTextWrapperInlineStyles,
  } from "./text-utils";
  import Text from "./Text.svelte";
  import { getColorModeContext } from "../../stores/color-mode";
  import { getLocalizationContext } from "../../stores/localization";
  import { getPaywallContext } from "../../stores/paywall";
  import { getSelectedStateContext } from "../../stores/selected";
  import { getOptionalVariablesContext } from "../../stores/variables";
  import type { TextNodeProps } from "../../types/components/text";
  import {
    getActiveStateProps,
    getIntroOfferStateProps,
    getPromoOfferStateProps,
    evaluateVisibilityConditions,
  } from "../../utils/style-utils";
  import { replaceVariables } from "../../utils/variable-utils";
  import { getOptionalPackageInfoContext } from "../../stores/packageInfo";

  const props: TextNodeProps = $props();

  const selectedState = getSelectedStateContext();
  const packageInfo = getOptionalPackageInfoContext();
  const {
    uiConfig,
    selectedPackageId,
    emitComponentInteraction,
    onNavigateToUrl,
  } = getPaywallContext();
  const actualProps = $derived.by(() => {
    return {
      ...props,
      ...getActiveStateProps($selectedState, props.overrides),
      ...getIntroOfferStateProps(
        !!$packageInfo?.hasIntroOffer || !!$packageInfo?.hasTrial,
        props.overrides,
      ),
      ...getPromoOfferStateProps(
        !!$packageInfo?.hasPromoOffer,
        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 variables = getOptionalVariablesContext();
  const { getLocalizedString } = getLocalizationContext();
  const label = $derived(
    replaceVariables(getLocalizedString(actualProps.text_lid), $variables),
  );

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

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

  const onclick = (event: MouseEvent) => {
    if (
      event.defaultPrevented ||
      event.button !== 0 ||
      event.metaKey ||
      event.ctrlKey ||
      event.shiftKey ||
      event.altKey
    ) {
      return;
    }

    const target = event.target;
    if (!(target instanceof Element)) {
      return;
    }

    const anchor = target.closest("a[href]");
    if (!(anchor instanceof HTMLAnchorElement)) {
      return;
    }

    const url = anchor.getAttribute("href") ?? anchor.href;
    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}>
    <Text style={textStyles} component="span">
      {@html markdownParsed}
    </Text>
  </span>
{/if}
