<template>
  <plugin-row class="table-area flex-row border">
    <div class="table-main-area">
      <plugin-row>
        <plugin-dropdown :disabled="false" label="取得元アプリ" :items="apps" v-model="table.app" />
      </plugin-row>
      <plugin-row>
        <plugin-dropdown
          :disabled="selectedAppData.loading"
          label="テーブル"
          :items="tableOptions"
          v-model="table.table"
          @change="selectTable"
          :key="componentKey"
        />
      </plugin-row>
      <plugin-row class="flex-row" v-if="isJoinConditionShown(table)">
        <plugin-label label="連結条件" />
        <plugin-table-connect-row connector="=" type="connect" :modelValue="table.onConditions" />
      </plugin-row>
      <plugin-row class="flex-row">
        <plugin-label label="取得フィールド" />
        <plugin-table-connect-row connector="→" type="mapping" :modelValue="table.fieldsMapping" />
      </plugin-row>
      <plugin-row class="flex-row">
        <plugin-label label="絞込条件" />
        <plugin-table-condition-row :modelValue="table.whereConditions" />
      </plugin-row>
    </div>
    <div class="table-action-area">
      <plugin-table-action-icon-group :can-delete="savedData.joinTables.length > 1" :table-id="table.id" />
    </div>
  </plugin-row>
</template>

<script setup lang="ts">
import {
  EMPTY_OPTION,
  getTableFieldsDropdownItems,
  loadAppFieldsAndLayout,
  resetConditions,
  resetTable,
} from '@/js/helper';
import { types } from '@/js/kintone-rest-api-client';
import type { CachedData, CachedSelectedAppData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
import { computed, inject, provide, reactive, ref, watch } from 'vue';

const savedData = inject<SavedData>('savedData') as SavedData;
const cachedData = inject<CachedData>('cachedData') as CachedData;

const props = defineProps<{
  table: JoinTable;
}>();
const apps = computed(() => cachedData.apps);
const tableOptions = ref([EMPTY_OPTION]);
const loading = ref(false);

const selectedAppData: CachedSelectedAppData = reactive({
  appFields: { fields: {}, layout: [] } as FieldsInfo,
  table: props.table,
  loading: false,
});
provide('selectedAppData', selectedAppData);

const componentKey = ref(0);
// fix-bug: force select saved data when load config
watch(
  () => tableOptions.value,
  () => {
    if (!props.table.table) return;
    componentKey.value += 1;
  },
  {
    once: true,
  },
);

watch(
  () => props.table.app,
  async (newVal, oldVal) => {
    if (!newVal) {
      return;
    }
    loading.value = true;
    const fields = await loadAppFieldsAndLayout(newVal);
    tableOptions.value = getTableFieldsDropdownItems(fields, types.SUBTABLE);
    selectedAppData.appFields = fields;
    props.table.meta = fields.fields;
    !!oldVal && resetTable(props.table);
    loading.value = false;
  },
  { immediate: true },
);

const selectTable = () => {
  resetConditions(props.table);
};

watch(
  () => !props.table.app || loading.value,
  (val) => {
    selectedAppData.loading = val;
  },
);

const isJoinConditionShown = (table: JoinTable) => {
  return savedData.joinTables[0].id !== table.id;
};
</script>
