<template>
  <el-dialog
    v-model="visible"
    :title="$t('chooseLanguage')"
    append-to-body
    width="520px"
    align-center
    draggable
  >
    <div v-if="languageList.length" class="flex flex-col gap-8px max-h-360px overflow-auto">
      <div
        v-for="item in languageList"
        :key="item.id"
        class="border border-solid border-border rounded-6px px-12px py-8px cursor-pointer hover:bg-bg-secondary"
        @click="handleClick(item.key)"
      >
        <div class="text-13px text-text-primary">{{ item.key }}</div>
        <div class="text-12px text-text-secondary truncate">{{ getPreview(item) }}</div>
      </div>
    </div>
    <el-empty v-else :description="$t('noLanguageData')" />
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useProjectStore } from '@/store/modules/project'
import type { Language } from '@/types/language'

const visible = ref(false)
const projectStore = useProjectStore()

const languageList = computed(() => projectStore.project?.languages || [])

const getPreview = (item: Language) => {
  return item.values.find((value) => value.value)?.value || '-'
}

defineExpose({
  open() {
    visible.value = true
  }
})

const emit = defineEmits<{
  select: [key: string]
}>()

const handleClick = (key: string) => {
  emit('select', key)
  visible.value = false
}
</script>
