import { useCallback, useState } from "react";
import { useListeners } from "./useListeners";
import { useLocalisationPlugin } from "./useLocalisationPlugin";
import { constants } from "../../constants";
import { Localisation } from "../../plugins/localisation";

type TPluginInstance = Localisation;

type TUseLocalisationLanguagesProps = {
  isNormalize: boolean;
};

type TUseLocalisationLanguagesReturn = {
  isLoading: boolean;
  langList: string[];
  lang: string | null;
  getChangeFn: (lang: string) => void;
};

/**
 * Получает данные о выбранном языке, список языков, состояние их загрузки и функцию смены языка
 * @returns {TUseLocalisationLanguagesReturn} Возвращает текущий язык, список доступных языков, флаг загрузки и функцию `getChangeFn` для переключения языка.
 * @example
 * import { useLocalisationLanguages } from "@delement/ui/utils/react";
 *
 * const langSwitchBtn = () => {
 *
 *   const { lang, langList, isLoading, getChangeFn } = useLocalisationLanguages();
 *
 *     const onClick = async (e, lang) => {
 *       e.preventDefault();
 *       await getChangeFn(lang);
 *     };
 *
 *     return (
 *       <div>
 *         <p>
 *           <Locale code={"forms.emptyInput"}/>
 *           <br/><br/>
 *           Текущий язык: <span>{lang}</span><br/>
 *           Доступные языки: <span>{langList.join(", ")}</span><br/>
 *         </p>
 *         {langList.map(item => {
 *           return (
 *             <p key={item}>
 *               <Btn isDisabled={isLoading || item === lang} onClick={(e) => onClick(e, item)} label={item}/>
 *             </p>
 *           );
 *         }
 *         )}
 *       </div>
 *     );
 * };
 */
export const useLocalisationLanguages = (props?: TUseLocalisationLanguagesProps): TUseLocalisationLanguagesReturn => {

  const {
    isNormalize = false,
  } = props || {};

  const getCurrentLang = () => Localisation.instance?.lang ?? "";

  const [ langList, setLangList ] = useState(() => Localisation.instance?.langList ?? []);

  const [ lang, setLang ] = useState(() => isNormalize ? Localisation.getLangWithRegion(getCurrentLang()) : getCurrentLang());

  const { plugin, isLoading } = useLocalisationPlugin();

  const onChange = useCallback(({ detail }: CustomEvent<{
    instance: TPluginInstance;
  }>) => {
    const { langList = [], lang = "" } = detail.instance;
    setLangList(langList);
    setLang(isNormalize ? Localisation.getLangWithRegion(lang) : getCurrentLang());
  }, []);

  const getChangeFn = useCallback(async (newLangCode = "") => {
    const newLang = isNormalize ? Localisation.getLangWithRegion(newLangCode) : newLangCode;
    return plugin?.getChangeLanguage(newLang!!)
      .then((result) => {
        setLang(newLang);
        return result;
      }) ?? await Promise.reject(`[useLocalisationLanguages]: Plugin are not ready`);
  }, [ plugin ]);

  useListeners({
    listeners: {
      [constants.localisationBubbles.localisationChange]: { fn: onChange },
    },
  });

  return {
    isLoading,
    langList,
    lang,
    getChangeFn,
  };

};