import * as React from "react";
import { View } from "react-native";
import { useState, useEffect } from "react";
import ContentVariants from "../../components/content-variants/index";
import type { BuilderContent } from "../../types/builder-content";
import { filterAttrs } from "../helpers";
import DynamicDiv from "../../components/dynamic-div";
import { getClassPropName } from "../../functions/get-class-prop-name";
import type { Nullable } from "../../types/typescript";
import { setAttrs } from "../helpers";
import { fetchSymbolContent } from "./symbol.helpers";
import type { SymbolProps } from "./symbol.types";

function Symbol(props: SymbolProps) {
  function blocksWrapper() {
    return View;
  }

  function contentWrapper() {
    return View;
  }

  function customComponents() {
    return Object.values(props.builderComponents);
  }

  function className() {
    return [
      ...[],
      "builder-symbol",
      props.symbol?.inline ? "builder-inline-symbol" : undefined,
      props.symbol?.dynamic || props.dynamic
        ? "builder-dynamic-symbol"
        : undefined,
    ]
      .filter(Boolean)
      .join(" ");
  }

  const [contentToUse, setContentToUse] = useState(() => props.symbol?.content);

  const [symbolEntry, setSymbolEntry] = useState(() => props.symbol?.entry);

  function setContent() {
    if (contentToUse && symbolEntry === props.symbol?.entry) return;
    fetchSymbolContent({
      symbol: props.symbol,
      builderContextValue: props.builderContext,
    }).then((newContent) => {
      if (newContent) {
        setContentToUse(newContent);
        setSymbolEntry(props.symbol?.entry);
      }
    });
  }

  useEffect(() => {}, []);
  useEffect(() => {
    setContent();
  }, [props.symbol]);

  return (
    <View
      {...{}}
      {...props.attributes}
      {...{
        dataSet: {
          class: className(),
        },
      }}
    >
      <ContentVariants
        nonce={props.builderContext.nonce}
        isNestedRender
        apiVersion={props.builderContext.apiVersion}
        apiKey={
          props.symbol?.global && props.symbol?.ownerId
            ? props.symbol.ownerId
            : props.builderContext.apiKey!
        }
        context={{
          ...props.builderContext.context,
          symbolId: props.builderBlock?.id,
        }}
        customComponents={customComponents()}
        data={{
          ...props.symbol?.data,
          ...props.builderContext.localState,
          ...contentToUse?.data?.state,
        }}
        canTrack={props.builderContext.canTrack}
        model={props.symbol?.model ?? ""}
        content={contentToUse}
        linkComponent={props.builderLinkComponent}
        blocksWrapper={blocksWrapper()}
        contentWrapper={contentWrapper()}
      />
    </View>
  );
}

export default Symbol;