<template>
  <h-dropdown class="ant-pro-dropdown ant-pro-dropdown-action" placement="bottomRight">
    <global-outlined class="select-lang-icon" style="color: #d1e2f2" />
    <template #overlay>
      <h-menu
        class="ant-pro-dropdown-menu language-dropdown-menu"
        :selected-keys="[currentLang]"
        @click="handleMenuClick"
      >
        <h-menu-item v-for="locale in locales" :key="locale" :disabled="!languageSupports[locale]">
          <template #icon>
            <span role="img" :aria-label="languageLabels[locale]" style="margin-right: 8px">
              {{ languageIcons[locale] }}
            </span>
          </template>
          {{ languageLabels[locale] }}
        </h-menu-item>
      </h-menu>
    </template>
  </h-dropdown>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';
import type { AppState } from '@/store/modules/app/state';
import { locales } from '@/locales';
import { GlobalOutlined } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';
import bus from '@/utils/bus';
import { langMap } from '@/locales/index';
import { setI18nLanguage } from '@crami/locale';
const languageLabels = {
  zhs: '简体中文',
  'zh-TW': '繁体中文',
  en: 'English',
  'pt-BR': 'Português',
};
const languageIcons = {
  zhs: '🇨🇳',
  'zh-TW': '🇭🇰',
  en: '🇺🇸',
  'pt-BR': '🇧🇷',
};
const languageSupports = {
  zhs: true,
  'zh-TW': false,
  en: true,
  'pt-BR': false,
};

export default defineComponent({
  setup() {
    const store = useStore<AppState>();
    const currentLang = computed(() => store.getters['app/lang']);
    const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
      store.dispatch('app/SET_LANG', key);
      setI18nLanguage(langMap[key]);
      bus.emit('changeLangue', key);
    };

    return {
      currentLang,
      locales,
      languageLabels,
      languageIcons,
      languageSupports,
      handleMenuClick,
    };
  },
  components: {
    GlobalOutlined,
  },
});
</script>
<style lang="less" scoped>
.select-lang-icon {
  padding-top: 3px !important;
  :deep(svg) {
    width: 16px !important;
    height: 16px !important;
  }
}
</style>
