/*
 This file is part of GNU Taler
 (C) 2021-2024 Taler Systems S.A.

 GNU Taler is free software; you can redistribute it and/or modify it under the
 terms of the GNU General Public License as published by the Free Software
 Foundation; either version 3, or (at your option) any later version.

 GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along with
 GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */

/**
 *
 * @author Sebastian Javier Marchano (sebasjm)
 */

import { useTranslationContext } from "@gnu-taler/web-util/browser";
import { h, VNode } from "preact";
import { useState } from "preact/hooks";
import langIcon from "../../assets/icons/languageicon.svg";
import { strings as messages } from "../../i18n/strings.js";

type LangsNames = {
  [P in keyof typeof messages]: string;
};

const names: LangsNames = {
  es: "Español [es]",
  en: "English [en]",
  de: "Deutsch [de]",
  uk: "Українська [uk]",
};

function getLangName(s: keyof LangsNames | string) {
  if (names[s]) return names[s];
  return s;
}

export function LangSelector(): VNode {
  const [updatingLang, setUpdatingLang] = useState(false);
  const { lang, changeLanguage } = useTranslationContext();

  return (
    <div class="dropdown is-active ">
      <div class="dropdown-trigger">
        <button
          class="button has-tooltip-left"
          data-tooltip="change language selection"
          aria-haspopup="true"
          aria-controls="dropdown-menu"
          onClick={() => setUpdatingLang(!updatingLang)}
        >
          <div class="icon is-small is-left">
            <img src={langIcon} />
          </div>
          <span>{getLangName(lang)}</span>
          <div class="icon is-right">
            <i class="mdi mdi-chevron-down" />
          </div>
        </button>
      </div>
      {updatingLang && (
        <div class="dropdown-menu" id="dropdown-menu" role="menu">
          <div class="dropdown-content">
            {Object.keys(names)
              .filter((l) => l !== lang)
              .map((l) => (
                <a
                  key={l}
                  class="dropdown-item"
                  value={l}
                  onClick={() => {
                    changeLanguage(l);
                    setUpdatingLang(false);
                  }}
                >
                  {getLangName(l)}
                </a>
              ))}
          </div>
        </div>
      )}
    </div>
  );
}