<template>
  <div class="flex flex-col gap-2 w-full">
    <TableSelect v-model="table" :disableTableSelect="disableTableSelect" />
    <ColumnSelect v-if="table != ''" v-model="columnSelect" :table="table" />
    <Where v-if="table != ''" v-model="where" :table="table" />
    <Order v-if="table != ''" v-model="order" :table="table" :columns="columnSelect" />
    <Join v-if="table != ''" v-model="modelValue.join" :table="table" />
  </div>
</template>

<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { mapActions, mapState } from "pinia";
import type { ConditionStructure, DynamicQueryStructure, OrderByStructure } from "@/types/dynamicQueries";
import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
import ColumnSelect from "./ColumnSelect.vue";
import Where from "./Where.vue";
import Order from "./Order.vue";
import Join from "./Join.vue";
import TableSelect from "./TableSelect.vue";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    modelValue: {
      type: Object as PropType<DynamicQueryStructure>,
      default: {
        select: "*",
        table: "",
        where: [],
        join: [],
        orderBy: [],
      },
    },
    disableTableSelect: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:model-value"],
  computed: {
    table: {
      get() {
        return this.modelValue.table || "";
      },
      set(val: string) {
        this.$emit("update:model-value", { ...this.modelValue, table: val });
      },
    },
    columnSelect: {
      get() {
        return this.modelValue.select;
      },
      set(val: "*" | Array<string>) {
        this.$emit("update:model-value", { ...this.modelValue, select: val });
      },
    },
    where: {
      get() {
        return this.modelValue.where;
      },
      set(val: Array<ConditionStructure>) {
        this.$emit("update:model-value", { ...this.modelValue, where: val });
      },
    },
    order: {
      get() {
        return this.modelValue.orderBy;
      },
      set(val: Array<OrderByStructure>) {
        this.$emit("update:model-value", { ...this.modelValue, orderBy: val });
      },
    },
    join: {
      get() {
        return this.modelValue.join;
      },
      set(val: Array<DynamicQueryStructure & { foreignColumn: string }>) {
        this.$emit("update:model-value", { ...this.modelValue, join: val });
      },
    },
  },
});
</script>
