<template>
  <div class="flex flex-row gap-2">
    <p class="w-14 min-w-14 pt-2">FROM</p>
    <select v-model="value" :disabled="disableTableSelect">
      <option value="" disabled>Tabelle auswählen</option>
      <option v-for="table in tableMetas" :value="table.tableName">
        {{ table.tableName }}
      </option>
    </select>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState } from "pinia";
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    disableTableSelect: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:model-value"],
  computed: {
    ...mapState(useQueryBuilderStore, ["tableMetas"]),
    value: {
      get() {
        return this.modelValue;
      },
      set(val: string) {
        this.$emit("update:model-value", val);
      },
    },
  },
});
</script>
