import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import I18nextBrowserLanguageDetector from "i18next-browser-languagedetector";

import "moment/locale/pl"
import "moment/locale/en-gb"
import moment, { isDuration, isMoment, Moment, unitOfTime } from "moment-timezone";
import { convertToRoman } from "@/utils/numbers";
import MomentUtils from "@date-io/moment";

const resources = {
    en: {
        translation: require('../translations/en.yaml'),
        management: require('../translations/management.en.yaml'),
    },
    pl: {
        translation: require('../translations/pl.yaml'),
        management: require('../translations/management.pl.yaml'),
    }
}

i18n
    .use(I18nextBrowserLanguageDetector)
    .use(initReactI18next)
    .init({
        resources,
        fallbackLng: "pl",
        compatibilityJSON: "v3",
        interpolation: {
            escapeValue: false,
            format: (value, format, lng) => {
                if (typeof value === "number" && format == "roman") {
                    return convertToRoman(value);
                }

                if (isMoment(value)) {
                    return value.locale(lng || "pl").format(format || "DD MMM YYYY");
                }

                if (isDuration(value)) {
                    if (format === "humanize") {
                        return value.locale(lng || "pl").humanize();
                    } else {
                        return Math.floor(value.locale(lng || "pl").as(format as unitOfTime.Base));
                    }
                }

                return value;
            }
        }
    })

document.documentElement.lang = i18n.language;
moment.locale(i18n.language)

export class LocalizedMomentUtils extends MomentUtils {
    getDatePickerHeaderText(date: Moment): string {
        return this.format(date, "d MMM yyyy");
    }
}

export default i18n;