/* eslint-disable jsx-a11y/label-has-associated-control */
import FormLocatizationSelect from "@/components/form/components/related/form-localization-select";
import Form from "@/components/form/form";
import { Button } from "@/components/ui/button/button";
import type { LocalizationData } from "@/hooks/useLanguageData";
import useLanguageData from "@/hooks/useLanguageData";
import { useLocale } from "@/hooks/useLocale";
import { useLocalizationStore } from "@/store/localization-store/use-localization-store";

const cultureCodeValues = {
  tr: "tr-TR",
  "tr-TR": "tr-TR",
  en: "en-US",
  "en-US": "en-US",
  de: "de-DE",
  "de-DE": "de-DE",
};

const GlobalizationForm = ({
  onSubmit,
}: {
  onSubmit?: (data: any) => void;
}) => {
  const { lngData, currencyData } = useLanguageData();
  const { changeLanguage, t } = useLocale();
  const { localizationState, setLocalizationData } = useLocalizationStore();

  return (
    <div className="mt-4 flex flex-col gap-4">
      <Form
        onSubmit={(data) => {
          setLocalizationData({
            region: "TR", // when we have more regions, we should change this to dynamic
            language: data.language ?? localizationState.data.language,
            currency: data.currency ?? localizationState.data.currency,
          });
          changeLanguage(data.language);
          onSubmit?.(data);
        }}
      >
        <div className="flex flex-col gap-8">
          <label className="flex w-full flex-col items-start justify-center gap-2">
            <span className="text-sm font-medium text-gray-800">
              {t("Region")}
            </span>
            <FormLocatizationSelect
              name="region"
              placeholder={t("Turkey")}
              data={[{ name: t("Turkey"), value: "tr" }]}
            />
          </label>
          <label className="flex w-full flex-col items-start justify-center gap-2">
            <span className="text-sm font-medium text-gray-800">
              {t("Language")}
            </span>
            <FormLocatizationSelect
              name="language"
              defaultValue={
                cultureCodeValues[
                  localizationState.data
                    .language as keyof typeof cultureCodeValues
                ] ?? "tr"
              }
              placeholder={
                lngData.find(
                  (item: LocalizationData) =>
                    item.value === localizationState.data.language,
                )?.name ?? t("Turkish")
              }
              data={lngData.filter((item) => item.menu)}
            />
          </label>
          <label className="flex w-full flex-col items-start justify-center gap-2">
            <span className="text-sm font-medium text-gray-800">
              {t("Currency unit")}
            </span>
            <FormLocatizationSelect
              name="currency"
              defaultValue={localizationState.data.currency ?? "TRY"}
              placeholder={
                currencyData.find(
                  (item: LocalizationData) =>
                    item.value === localizationState.data.currency,
                )?.name ?? t("TRY - Turkish Lira (₺)")
              }
              data={currencyData}
            />
          </label>
          <Button type="submit" variant="primary">
            {t("Apply")}
          </Button>
        </div>
      </Form>
    </div>
  );
};

export default GlobalizationForm;