<template>
  <button
    class="flex h-7 cursor-pointer items-center rounded text-ink-gray-7 duration-300 ease-in-out focus:outline-none hover:bg-surface-gray-2"
    @click="toggleLocale"
  >
    <div
      class="flex w-full items-center justify-between duration-300 ease-in-out"
      :class="isCollapsed ? 'ml-[3px] p-1' : 'px-2 py-1'"
    >
      <div class="flex items-center truncate">
        <Tooltip :text="currentLocaleLabel" placement="right" :disabled="!isCollapsed">
          <span class="grid flex-shrink-0 place-items-center">
            <FeatherIcon name="globe" class="h-4 w-4 text-ink-gray-7" />
          </span>
        </Tooltip>
        <span
          class="flex-1 flex-shrink-0 truncate text-sm duration-300 ease-in-out"
          :class="
            isCollapsed
              ? 'ml-0 w-0 overflow-hidden opacity-0'
              : 'ml-2 w-auto opacity-100'
          "
        >
          {{ currentLocaleLabel }}
        </span>
      </div>
    </div>
  </button>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { Tooltip, FeatherIcon } from 'frappe-ui'

defineProps({
  isCollapsed: {
    type: Boolean,
    default: false,
  },
})

const { locale } = useI18n()

const locales = {
  en: 'English',
  ru: 'Русский',
}

const currentLocaleLabel = computed(() => locales[locale.value] || locale.value)

function toggleLocale() {
  const newLocale = locale.value === 'ru' ? 'en' : 'ru'
  locale.value = newLocale
  localStorage.setItem('admin-panel-locale', newLocale)
}
</script>
