import * as React from "react";
import {} from "react-native";
import { useState, useEffect } from "react";

type VariantsProviderProps = ContentVariantsPrps & {
  /**
   * For internal use only. Do not provide this prop.
   */
  isNestedRender?: boolean;
};
import {
  SDKS_SUPPORTING_PERSONALIZATION,
  getInitPersonalizationVariantsFnsScriptString,
} from "../../blocks/personalization-container/helpers";
import { TARGET } from "../../constants/target";
import { handleABTestingSync } from "../../helpers/ab-tests";
import { getDefaultCanTrack } from "../../helpers/canTrack";
import ContentComponent from "../content/content";
import InlinedScript from "../inlined-script";
import InlinedStyles from "../inlined-styles";
import type { ContentVariantsPrps } from "./content-variants.types";
import {
  checkShouldRenderVariants,
  getInitVariantsFnsScriptString,
  getUpdateCookieAndStylesScript,
  getVariants,
} from "./helpers";

function ContentVariants(props: VariantsProviderProps) {
  const [shouldRenderVariants, setShouldRenderVariants] = useState(() =>
    checkShouldRenderVariants({
      canTrack: getDefaultCanTrack(props.canTrack),
      content: props.content,
    })
  );

  function updateCookieAndStylesScriptStr() {
    return getUpdateCookieAndStylesScript(
      getVariants(props.content).map((value) => ({
        id: value.testVariationId!,
        testRatio: value.testRatio,
      })),
      props.content?.id || ""
    );
  }

  function hideVariantsStyleString() {
    return getVariants(props.content)
      .map((value) => `.variant-${value.testVariationId} { display: none; } `)
      .join("");
  }

  function defaultContent() {
    return shouldRenderVariants
      ? {
          ...props.content,
          testVariationId: props.content?.id,
        }
      : handleABTestingSync({
          item: props.content,
          canTrack: getDefaultCanTrack(props.canTrack),
        });
  }

  useEffect(() => {
    /**
     * For Solid/Svelte: we unmount the non-winning variants post-hydration.
     */
  }, []);

  return (
    <>
      {!props.isNestedRender && TARGET !== "reactNative" ? (
        <>
          <InlinedScript
            id="builderio-init-variants-fns"
            scriptStr={getInitVariantsFnsScriptString()}
            nonce={props.nonce || ""}
          />
          {SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET) ? (
            <InlinedScript
              id="builderio-init-personalization-variants-fns"
              nonce={props.nonce || ""}
              scriptStr={getInitPersonalizationVariantsFnsScriptString()}
            />
          ) : null}
        </>
      ) : null}
      {shouldRenderVariants ? (
        <>
          <InlinedStyles
            id="builderio-variants"
            styles={hideVariantsStyleString()}
            nonce={props.nonce || ""}
          />
          <InlinedScript
            id="builderio-variants-visibility"
            scriptStr={updateCookieAndStylesScriptStr()}
            nonce={props.nonce || ""}
          />
          {getVariants(props.content)?.map((variant) => (
            <ContentComponent
              apiHost={props.apiHost}
              isNestedRender={props.isNestedRender}
              key={variant.testVariationId}
              nonce={props.nonce}
              content={variant}
              showContent={false}
              model={props.model}
              data={props.data}
              context={props.context}
              apiKey={props.apiKey}
              apiVersion={props.apiVersion}
              customComponents={props.customComponents}
              linkComponent={props.linkComponent}
              canTrack={props.canTrack}
              locale={props.locale}
              enrich={props.enrich}
              isSsrAbTest={shouldRenderVariants}
              blocksWrapper={props.blocksWrapper}
              blocksWrapperProps={props.blocksWrapperProps}
              contentWrapper={props.contentWrapper}
              contentWrapperProps={props.contentWrapperProps}
              trustedHosts={props.trustedHosts}
              {...{
                strictStyleMode: props.strictStyleMode,
              }}
            />
          ))}
        </>
      ) : null}
      <ContentComponent
        apiHost={props.apiHost}
        nonce={props.nonce}
        isNestedRender={props.isNestedRender}
        {...{
          strictStyleMode: props.strictStyleMode,
        }}
        content={defaultContent()}
        showContent
        model={props.model}
        data={props.data}
        context={props.context}
        apiKey={props.apiKey}
        apiVersion={props.apiVersion}
        customComponents={props.customComponents}
        linkComponent={props.linkComponent}
        canTrack={props.canTrack}
        locale={props.locale}
        enrich={props.enrich}
        isSsrAbTest={shouldRenderVariants}
        blocksWrapper={props.blocksWrapper}
        blocksWrapperProps={props.blocksWrapperProps}
        contentWrapper={props.contentWrapper}
        contentWrapperProps={props.contentWrapperProps}
        trustedHosts={props.trustedHosts}
      />
    </>
  );
}

export default ContentVariants;