<template>
  <!-- <el-autocomplete v-model="ocr_lang" :fetch-suggestions="querySearch" clearable class="inline-input w-50"
    placeholder="*Set Language*" @select="handleSelect" /> -->
  <el-select v-model="ocr_lang" class="m-2" placeholder="Select">
    <el-option v-for="item in options" :key="item.value" :value="item.value" />
  </el-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onMounted } from "vue";
import { useOcrLangStore } from '../store/OcrLang';
import { storeToRefs } from 'pinia'

const value = ref('')

const options = [
  {
    value: 'auto'
  },
  {
    value: 'chinese'
  },
  {
    value: 'chinese_tra'
  },
  {
    value: 'english'
  },
  {
    value: 'korean'
  },
  {
    value: 'japanese'
  },
  {
    value: 'latin'
  },
  {
    value: 'devanagari'
  }
]

const ol = useOcrLangStore();
const { ocr_lang } = storeToRefs(ol);

const loadAll = () => {
  return [
    { value: 'chinese' },
    { value: 'chinese_cht' },
    { value: 'english' },
    { value: 'korean' },
    { value: 'japan' },
    { value: 'latin' },
    // { value: 'cyrillic' },
    { value: 'devanagari' },
    // { value: 'arabic' },
  ]
}

interface RestaurantItem {
  value: string
}
const restaurants = ref<RestaurantItem[]>([])

const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  // call callback function to return suggestions
  cb(results)
}

const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}

const handleSelect = (item: RestaurantItem) => {
  console.log(item)
}

onMounted(async () => {
  restaurants.value = loadAll()
});

</script>