import { VNode, h } from "preact";
import { LangSelector } from "../../components/menu/LangSelector.js";
import { useLang, useTranslationContext } from "@gnu-taler/web-util/browser";
import { InputToggle } from "../../components/form/InputToggle.js";
import { Settings, useSettings } from "../../hooks/useSettings.js";
import { FormErrors, FormProvider } from "../../components/form/FormProvider.js";
import { useState } from "preact/hooks";

function getBrowserLang(): string | undefined {
  if (typeof window === "undefined") return undefined;
  if (window.navigator.languages) return window.navigator.languages[0];
  if (window.navigator.language) return window.navigator.language;
  return undefined;
}

export function Settings(): VNode {
  const { i18n } = useTranslationContext()
  const borwserLang = getBrowserLang()
  const { update } = useLang()

  const [value, updateValue] = useSettings()
  const errors: FormErrors<Settings> = {
  }

  function valueHandler(s: (d: Partial<Settings>) => Partial<Settings>): void {
    const next = s(value)
    updateValue("advanceOrderMode", next.advanceOrderMode ?? false)
  }

  return <div>
    <section class="section is-main-section">
      <div class="columns">
        <div class="column" />
        <div class="column is-four-fifths">
          <div class="field is-horizontal">
            <div class="field-label is-normal">
              <label class="label" style={{ width: 200 }}>
                <i18n.Translate>Language</i18n.Translate>
                <span class="icon has-tooltip-right" data-tooltip={"Force language setting instance of taking the browser"}>
                  <i class="mdi mdi-information" />
                </span>
              </label>
            </div>
            <div class="field has-addons">
              <LangSelector />
              &nbsp;
              {borwserLang !== undefined && <button
                data-tooltip={i18n.str`generate random secret key`}
                class="button is-info mr-3"
                onClick={(e) => {
                  update(borwserLang.substring(0, 2))
                }}
              >
                <i18n.Translate>Set default</i18n.Translate>
              </button>}
            </div>
          </div>
          <FormProvider<Settings>
            name="settings"
            errors={errors}
            object={value}
            valueHandler={valueHandler}
          >
            <InputToggle<Settings>
              label={i18n.str`Advance order creation`}
              tooltip={i18n.str`Shows more options in the order creation form`}
              name="advanceOrderMode"
            />
          </FormProvider>


        </div>
        <div class="column" />
      </div>
    </section>
  </div>
}