import { useEffect, useRef, useState } from "react";
import {
  MultiLangListContainer,
  MultiLangListItemContainer,
  MultiLangTextContainer,
} from "../containers/Container";
import {
  MultiLangListContainerStyle,
  MultiLangListTextAnimationStyle,
  MultiLangTextContainerStyle,
} from "../styles/InlineStyles";
import { IMlTextProps, IMultilingualText } from "./MlFreeTextMessage";
import { GenericUtil } from "../../../common/utils/GenericUtil";
import { DDRPlaceholderSelector } from "../../../composition_riv/constants/RIV";

export const MultiLanguageText = ({
  fontSize,
  style,
  color,
  multilanguage,
  multiLineText,
  direction,
}: IMlTextProps) => {
  const [previous, setPrevious] = useState(multilanguage);
  const [previousDirection, setPreviousDirection] = useState(direction);
  const [languages, setLanguages] = useState<IMultilingualText[]>([]);
  const nextTextIndex = useRef(0);
  const arrayOfDivs = useRef<INode[]>([]);
  const uniqueId = useRef(GenericUtil.getInstance().getRandomID());

  interface INode {
    node: HTMLDivElement;
    id: string;
    pNode: Element | null;
  }

  interface IDivData {
    sampleText: string;
    localecode: string;
    duration: string;
  }

  const textInitialPosition: {
    [key: string]: {
      left: string;
      top: string;
    };
  } = {
    up: { left: "0%", top: "100%" },
    down: { left: "0%", top: "-100%" },
    right: { left: "100%", top: "0%" },
    left: { left: "-100%", top: "0%" },
  };
  useEffect(() => {
    if (previous !== multilanguage || direction !== previousDirection) {
      populateLanguageList();
    }
  }, [multilanguage, direction]);

  useEffect(() => {
    if (multilanguage) {
      populateLanguageList();
    }
    return () => {
      arrayOfDivs.current.map((elt) =>
        elt.node.removeEventListener("animationend", callAppendNextDiv)
      );
    };
  }, []);

  useEffect(() => {
    setMultilingualTexts();
  }, [multilanguage, direction]);
  function renderMultilanguageText(): IMultilingualText[] {

    const previousTextInfo = JSON.parse(String(multilanguage));

    return (

      Object.keys(previousTextInfo)

        .filter((lang) => previousTextInfo[lang].checked)

        .map((lang) => ({

          sampleText: previousTextInfo[lang].sampleText,

          localecode: previousTextInfo[lang].id,

        })) || []

    );

  }
  function populateLanguageList() {

    setPrevious(multilanguage);

    const language = renderMultilanguageText() || [];

    setLanguages(language);

  }
  function createDiv(divData: IDivData) {
    const div = document.createElement("div");
    div.classList.add("lang");
    div.id = "mlText" + divData.localecode;
    div.setAttribute("data-duration", divData.duration);
    div.setAttribute("data-direction", direction);
    div.style.position = "absolute";
    div.style.paddingLeft = "1rem";
    div.style.width = "100%";
    div.style.height = "100%";
    div.style.left = textInitialPosition[direction].left;
    div.style.top = textInitialPosition[direction].top;
    div.style.animationName = `multilingual-anim-${direction}`;
    div.style.animationDelay = "0s";
    div.style.animationDuration = divData.duration + "s";
    div.innerText = divData.sampleText;
    return div;
  }

  function appendDiv(divToAppend: INode, index: number) {
    const elt = divToAppend.node;
    nextTextIndex.current = index;
    if (divToAppend.pNode) {
      divToAppend.pNode.appendChild(elt);
    }
  }

  function appendNextDiv(index: number) {
    if (arrayOfDivs.current.length > 0) {
      index = (index + 1) % arrayOfDivs.current.length;
      appendDiv(arrayOfDivs.current[index], index);
    }
  }

  function callAppendNextDiv() {
    if (arrayOfDivs.current.length > 0) {
      appendNextDiv(nextTextIndex.current);
    }
  }

  function setMultilingualTexts() {
    if (!multilanguage) return;
    nextTextIndex.current = 0;
    const parentElement = document.getElementById(uniqueId.current);
    parentElement!.innerHTML = "";
    const previousTextInfo = JSON.parse(String(multilanguage));
    const checkedLanguages = Object.keys(previousTextInfo).filter(
      (lang) => previousTextInfo[lang].checked
    );
    const multilingualText = checkedLanguages.map((lang) => ({
      sampleText: previousTextInfo[lang].sampleText,
      localecode: previousTextInfo[lang].id,
      duration: previousTextInfo[lang].duration,
    }));
    const newArrayOfDivs = multilingualText
      .map((element) => {
        if (element.sampleText !== null && element.sampleText.trim() !== "") {
          const dynamicDiv = createDiv(element);
          dynamicDiv.addEventListener("animationend", callAppendNextDiv);
          return {
            node: dynamicDiv,
            id: dynamicDiv.id,
            pNode: parentElement,
          };
        }
        return null;
      })
      .filter((div): div is { node: HTMLDivElement; id: string; pNode: HTMLElement | null } => div !== null);

    arrayOfDivs.current = newArrayOfDivs;
    if (arrayOfDivs.current.length > 0) {
      appendDiv(arrayOfDivs.current[0], 0);
    }
  }
  const itemCount = languages.length;
  const isSameContent = () => {
    return previous === multilanguage && previousDirection === direction;
  };


  return (
    <MultiLangTextContainer style={MultiLangTextContainerStyle()}>
      <MultiLangListContainer
        id={uniqueId.current}
        className="multiLingual"
        style={MultiLangListContainerStyle(
          fontSize,
          color,
          multiLineText,
          style
        )}
      >
        {isSameContent() &&

          languages.map(
            (item: { sampleText: any; localecode: string }, index: number) => (
              <MultiLangListItemContainer
                className="multiLingual"
                style={MultiLangListTextAnimationStyle(
                  index * 12,
                  itemCount,
                  12,

                  direction

                )}

                key={`mlListItem${item.sampleText}${index}`}

                data-ddrvarid={`${DDRPlaceholderSelector.MultiLangFreeTextMessage}.${item.localecode}`}

              >

                {item.sampleText}

              </MultiLangListItemContainer>

            )

          )}

      </MultiLangListContainer>

    </MultiLangTextContainer>
  );
};