import en_US from 'date-fns/locale/en-US';
import { createInstance } from 'i18next';
import { ReactNode, forwardRef } from 'react';

import { en } from '../../assets/locales/en';
import sinchSmbTheme from '../../assets/themes/SinchSmb.json';
import { Locale } from '../../constans/locale';
import { assertEmptyObject } from '../../utils/assertEmptyObject';
import { HiveUI, LanguageConfig, LinkComponent, LinkComponentProps } from '../HiveUI';
import { I18n } from '../contexts/TranslationContext/types';

const i18nInstance: I18n = (() => {
  const instance = createInstance({
    resources: {
      en: {
        translation: en,
      },
    },
    lng: 'en',
    interpolation: {
      // react already safes from XSS => https://www.i18next.com/translation-function/interpolation#unescape
      escapeValue: false,
    },
  });

  instance.init();

  return instance;
})();

const languagesConfig: LanguageConfig[] = [
  {
    language: 'en',
    defaultLocale: Locale.English_USA,
    locales: {
      [Locale.English_USA]: {
        dateFns: en_US,
      },
    },
  },
];

const Link: LinkComponent = forwardRef<HTMLAnchorElement, LinkComponentProps>(
  ({ to, children, ...rest }, ref) => {
    return (
      // eslint-disable-next-line react/jsx-props-no-spreading
      <a ref={ref} href={`${to}`} {...rest}>
        {children}
      </a>
    );
  },
);

/** Props for {@link HiveUIStarter} */
export interface HiveUIStarterProps {
  children: ReactNode;
}

/**
 * It is a starter wrapper around the {@link HiveUI} with a pre-configured theme, translation, localization, and pre-defined `linkComponent`.
 * It is designed as an introduction to the HiveUI system and **can't be configured**.
 *
 * Feel free to use it as a playground to better understand the system or for simple projects.
 * Avoid using it in complex production as it can't be customized.
 *
 * @example
 * ```tsx
 * import { HiveUIStarter } from '@sinchsmb/ui-kit/HiveUIStarter';
 * import { Button } from '@sinchsmb/ui-kit';
 *
 * <HiveUIStarter>
 *   <Button>Start</Button>
 * </HiveUIStarter>
 * ```
 */
export function HiveUIStarter(props: HiveUIStarterProps) {
  const { children, ...restProps } = props;
  assertEmptyObject(restProps);

  return (
    <HiveUI i18n={i18nInstance} languages={languagesConfig} linkComponent={Link} theme={sinchSmbTheme}>
      {children}
    </HiveUI>
  );
}