<script>

</script>

<script setup>
import { useForwardProps } from "reka-ui";
import { reactiveOmit } from "@vueuse/core";
import B24SelectMenu from "../SelectMenu.vue";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  locales: { type: Array, required: false },
  id: { type: String, required: false },
  placeholder: { type: String, required: false },
  searchInput: { type: [Boolean, Object], required: false, default: false },
  color: { type: null, required: false },
  size: { type: null, required: false },
  noPadding: { type: Boolean, required: false },
  noBorder: { type: Boolean, required: false },
  underline: { type: Boolean, required: false },
  rounded: { type: Boolean, required: false },
  tag: { type: String, required: false },
  tagColor: { type: null, required: false },
  required: { type: Boolean, required: false },
  trailingIcon: { type: [Function, Object], required: false },
  selectedIcon: { type: [Function, Object], required: false },
  clear: { type: [Boolean, Object], required: false },
  clearIcon: { type: [Function, Object], required: false },
  content: { type: Object, required: false },
  arrow: { type: [Boolean, Object], required: false },
  portal: { type: [Boolean, String], required: false, skipCheck: true },
  virtualize: { type: [Boolean, Object], required: false },
  valueKey: { type: String, required: false, default: "code" },
  labelKey: { type: null, required: false, default: "name" },
  descriptionKey: { type: null, required: false },
  defaultValue: { type: null, required: false },
  modelModifiers: { type: null, required: false },
  multiple: { type: Boolean, required: false },
  highlight: { type: Boolean, required: false },
  createItem: { type: [Boolean, String, Object], required: false },
  filterFields: { type: Array, required: false },
  ignoreFilter: { type: Boolean, required: false },
  autofocus: { type: Boolean, required: false },
  autofocusDelay: { type: Number, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false },
  open: { type: Boolean, required: false },
  defaultOpen: { type: Boolean, required: false },
  disabled: { type: Boolean, required: false },
  name: { type: String, required: false },
  resetSearchTermOnBlur: { type: Boolean, required: false },
  resetSearchTermOnSelect: { type: Boolean, required: false },
  resetModelValueOnClear: { type: Boolean, required: false },
  highlightOnHover: { type: Boolean, required: false },
  by: { type: [String, Function], required: false },
  icon: { type: [Function, Object], required: false },
  avatar: { type: Object, required: false },
  loading: { type: Boolean, required: false },
  trailing: { type: Boolean, required: false }
});
const selectMenuProps = useForwardProps(reactiveOmit(props, "locales"));
const modelValue = defineModel({ type: String, ...{ required: true } });
function getEmojiFlag(locale) {
  const languageToCountry = {
    en: "us",
    // English -> USA
    de: "de",
    // Deutsch
    la: "es",
    // Catalan -> Spain
    br: "br",
    // Português
    fr: "fr",
    // Français
    it: "it",
    // Italiano
    pl: "pl",
    // Polski
    ru: "ru",
    // Russia -> Russia
    ua: "ua",
    // Ukrainian -> Ukraine
    tr: "tr",
    // Türkçe
    sc: "cn",
    // 中文（简体）
    tc: "tw",
    // 中文（繁體)
    ja: "jp",
    // Japanese -> Japan
    vn: "vn",
    // Tiếng Việt
    id: "id",
    // Bahasa Indonesia
    ms: "my",
    // Bahasa Melayu
    th: "th",
    // ภาษาไทย
    ar: "sa",
    // Arabic -> Saudi Arabia
    kk: "kz",
    // Kazakh -> Kazakhstan
    hi: "in"
    // Indian (हिन्दी)
  };
  const baseLanguage = locale.split("-")[0]?.toLowerCase() || locale;
  const countryCode = languageToCountry[baseLanguage] || locale.replace(/^.*-/, "").slice(0, 2);
  return countryCode.toUpperCase().split("").map((char) => String.fromCodePoint(127397 + char.charCodeAt(0))).join("");
}
</script>

<template>
  <B24SelectMenu
    v-model="modelValue"
    v-bind="{ ...selectMenuProps, ...$attrs }"
    :items="locales"
  >
    <template #leading>
      <span v-if="modelValue" class="size-5 text-center">
        {{ getEmojiFlag(modelValue) }}
      </span>
    </template>

    <template #item-leading="{ item }">
      <span class="size-5 text-center">
        {{ getEmojiFlag(item.code) }}
      </span>
    </template>
  </B24SelectMenu>
</template>
