import { Margin } from "../elements/Margin";
import { Page } from "../types/Page";
import { changePage, setPageContent } from "../pageUtils";
import { makeElement } from "../htmlUtils";
import { pageState } from "../globalPageState";
import i18next from 'i18next';
// @ts-ignore
import translations from "../translations/index.mjs";

const languageIDs = Object.getOwnPropertyNames(translations);

export class SetLanguagePage extends Page {
  constructor() {
    super();
  }
  render(): void {
    const setLanguageForm = makeElement({
      tag: "form",
      id: "setLanguageForm",
      children: [
        Margin(makeElement({
          tag: "select",
          class: ["uk-select", "uk-form-width-large"],
          attributes: {
            name: "language"
          },
          children: languageIDs.map(function (languageID) {
            return makeElement({
              tag: "option",
              text: i18next.getFixedT(languageID, null)("language_name"),
              attributes: { value: languageID }
            })
          })
        })
        ),
        makeElement({
          tag: "p",
          id: "errorText",
          class: "uk-text-danger"
        }),
        makeElement({
          tag: "button",
          class: ["uk-button", "uk-button-primary"],
          text: i18next.t("set_language_btn"),
          attributes: {
            type: "submit",
          }
        })
      ]
    }) as HTMLFormElement;
    setPageContent(setLanguageForm);
    setLanguageForm.addEventListener("submit", function (e) {
      e.preventDefault();
      const formData = new FormData(setLanguageForm);
      const language = formData.get("language") as string;
      pageState.language = language;
      console.log(pageState.language);
      i18next.changeLanguage(language).then((t) => {
        changePage("HOME", false);
        pageState.pageDirection = t("language_direction");
        location.reload();
      });
    });
  }
  get name(): string {
    return i18next.t("set_language_title");
  }
}