<template>
  <div class="flex flex-col gap-2">
    <TableSelect v-model="table" />
    <ColumnSelect v-model="columnSelect" :table="table" />
    <Where v-model="where" :table="table" />
    <Order v-model="order" :table="table" :columns="columnSelect" />
    <Join 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: [],
      },
    },
  },
  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>