import {
  JioTranslateEvent,
  JioTranslateInstance,
} from '@jiotranslate/core-beta';
import { useCallback, useEffect, useState } from 'react';
import {
  BackendFetch,
  DevTools,
  JioTranslate,
  ObserverPlugin,
} from '../package/entry-development';

export const secrets = {
  apiUrl: 'http://localhost:8080',
  apiKey: 'tgpak_g5pxg4zthfugsntlorvds3jymzuggodkmrvts4dmobvti',
};

export const tolgee = JioTranslate()
  .use(DevTools())

  .use(ObserverPlugin())
  .init({
    ...secrets,
    observerType: 'text',
    // observerOptions: { inputPrefix: '[[', inputSuffix: ']]' },
    availableLanguages: ['en', 'mr-IN', 'hi-IN'],
    defaultLanguage: localStorage.getItem('language'),
    tagNewKeys: ['draft'],
    dynamicScanningEnable: true,
  });

export const useTolgee = (
  events?: JioTranslateEvent[]
): JioTranslateInstance => {
  const [_, setCounter] = useState(0);

  const rerender = useCallback(() => {
    setCounter((num) => num + 1);
  }, [setCounter]);

  useEffect(() => {
    const listeners = events?.map((e) => tolgee.on(e, rerender));
    return () => {
      listeners?.forEach((listener) => listener.unsubscribe());
    };
  }, [events?.join(':')]);

  return tolgee;
};