<template>
  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow"/>
</template>

<script setup lang="ts">
import type { FieldsJoinMapping } from '@/types/model';
import { defineProps, defineEmits } from 'vue';
import { Dropdown } from 'kintone-ui-component/lib/dropdown';

const props = defineProps<{
  connector: string;
  modelValue: FieldsJoinMapping[];
}>();

const renderDropdown = (cellData: string) => {
  const dropdown = new Dropdown({
    items: [
      { label: 'John Brown', value: 'john' },
      { label: 'Steven Gerard', value: 'steven' },
    ],
    value: cellData,
  });
  return dropdown;
};
const renderConnector = () => {
  return props.connector;
};

const columns = [
  {
    title: '取得元アプリのフィールド',
    field: 'leftField',
    render: renderDropdown,
  },
  {
    title: '',
    field: 'connector',
    render: renderConnector,
  },
  {
    title: 'このアプリのフィールド',
    field: 'rightField',
    render: renderDropdown,
  },
];

const leftFields = [] as kintone.fieldTypes.DropDown['Item'][];
const rightFields = [] as kintone.fieldTypes.DropDown['Item'][];

const emit = defineEmits<{
  (e: 'update:modelValue', value: FieldsJoinMapping[]): void;
}>();

const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
};

const changeField = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
  item[key] = value;
  emit('update:modelValue', props.modelValue);
};
</script>
