import { DDRPlaceholderSelector } from "../../../composition_riv/constants/RIV";
import {
  MultiLangListContainer,
  MultiLangListItemContainer,
  MultiLangTextContainer,
} from "../containers/Container";
import {
  MultiLangListContainerStyle,
  MultiLangListTextAnimationStyle,
  MultiLangTextContainerStyle,
} from "../styles/InlineStyles";
import { useEffect, useState } from "react";

export interface IMlTextProps {
  fontSize: number;
  style: string;
  color?: string;
  multilanguage: string;
  multiLineText?: boolean;
  direction: string;
  speed: number;
}

export interface IMultilingualText {
  sampleText: any;
  localecode: any;
}

export const MlFreeTextMessage = ({
  multilanguage,
  multiLineText,
  fontSize,
  style,
  color,
  direction,
}: IMlTextProps) => {
  const [previous, setPrevious] = useState(multilanguage);
  const [languages, setLanguages] = useState<IMultilingualText[]>([]);
  const [previousDirection, setPreviousDirection] = useState(direction);
  useEffect(() => {
    if (previous !== multilanguage || direction !== previousDirection) {
      populateLanguageList();
    }
  }, [multilanguage, previousDirection]);

  useEffect(() => {
    if (previousDirection !== direction) {
      setPreviousDirection(direction);
    }
  }, [direction]);

  useEffect(() => {
    if (multilanguage) {
      populateLanguageList();
    }
  }, []);

  function populateLanguageList() {
    setPrevious(multilanguage);
    const language = renderMultilanguageText() || [];
    setLanguages(language);
  }

  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 getSelectedLocaleCodes() {
    if (!multilanguage) return [];
    const previousTextInfo = JSON.parse(String(multilanguage));
    const localeCodes = Object.keys(previousTextInfo)
      .filter((lang) => previousTextInfo[lang].checked)
      .map((lang) => previousTextInfo[lang].id);
    return localeCodes;
  }

  function getExistingLocaleCode() {
    if (!multilanguage) return [];
    const previousTextInfo = JSON.parse(String(multilanguage));
    const existingLocales = Object.keys(previousTextInfo).map(
      (lang) => previousTextInfo[lang].id
    );
    return existingLocales;
  }

  const itemCount = languages.length;
  const isSameContent = () => {
    return previous === multilanguage && previousDirection === direction;
  };

  return (
    <MultiLangTextContainer style={MultiLangTextContainerStyle()}>
      <MultiLangListContainer
        data-existing-locales={getExistingLocaleCode()}
        data-selected-locales={getSelectedLocaleCodes()}
        data-msg-ddrvarid="data-ddr-msg-list"
        data-direction={direction}
        style={MultiLangListContainerStyle(
          fontSize,
          color,
          multiLineText,
          style
        )}
      >
        {isSameContent() &&
          languages.map(
            (item: { sampleText: any; localecode: string }, index: number) => (
              <MultiLangListItemContainer
                className="not-saved"
                style={MultiLangListTextAnimationStyle(
                  index * 4,
                  itemCount,
                  4,
                  direction
                )}
                key={`mlListItem${item.sampleText}${index}`}
                data-ddrvarid={`${DDRPlaceholderSelector.MultiLangFreeTextMessage}.${item.localecode}`}
              >
                {item.sampleText}
              </MultiLangListItemContainer>
            )
          )}
      </MultiLangListContainer>
    </MultiLangTextContainer>
  );
};