<template>
  <div>
    <kuc-combobox :value="optionValue" :items="options" @change="updateValue" :disabled="disabled" />

    <div v-if="!optionValue">
      <kuc-datetime-picker v-if="time" :value="dateTimeValue" @change="updateValue" :disabled="disabled" />
      <kuc-date-picker v-else :value="dateTimeValue" @change="updateValue" :disabled="disabled" />
    </div>
    <kuc-combobox
      v-else-if="isWeek"
      :items="weekOptions"
      :value="inputValue"
      @change="updateValue"
      :disabled="disabled"
    />
    <kuc-combobox
      v-else-if="isMonth"
      :items="monthOptions"
      :value="inputValue"
      @change="updateValue"
      :disabled="disabled"
    />
  </div>
</template>

<script setup lang="ts">
import { getComponent, getDateFuncList } from '@/js/conditions';
import { getFieldObj, search } from '@/js/helper';
import type { CachedSelectedAppData, WhereCondition } from '@/types/model';
import type { KucEvent } from '@/types/my-kintone';
import type { ComboboxChangeEventDetail, TextInputEventDetail } from 'kintone-ui-component';
import { defineProps, defineEmits, computed, ref, watch } from 'vue';

const props = defineProps<{
  value: string;
  time: boolean;
  disabled: boolean;
}>();

// const regex = /^(?<func>\w+)\((?<val>.+)\)$|^(?<val>\d+)$/;
const dateTimeValue = ref('');
const inputValue = ref('');
const optionValue = ref('');

const isWeek = computed(() => optionValue.value?.indexOf('WEEK') >= 0);
const isMonth = computed(() => optionValue.value?.indexOf('MONTH') >= 0);
const isFromToday = computed(() => optionValue.value?.indexOf('FROM_TODAY') >= 0);

watch(
  () => props.value,
  () => {
    // const match = props.value.match(regex);
    // const func = match?.groups?.func || '';
    // optionValue.value = func;

    // const value = match?.groups?.val || '';
    // inputValue.value = '';
    // dateTimeValue.value = '';

    // if (!optionValue.value) {
    //   dateTimeValue.value = value;
    // } else if (isWeek.value || isMonth.value) {
    //   inputValue.value = value;
    // } else if (isFromToday.value) {
    //   // inputValue.value = value;
    //   // dateTimeValue.value = func;
    // }
  },
  { immediate: true },
);

const options = computed(() => {
  return getDateFuncList(props.time).map((item) => {
    return { label: typeof item.label === 'function' ? item.label(props.time) : item.label, value: item.value };
  });
});

const emit = defineEmits<{
  (e: 'change', data: KucEvent<{ value: string }>): void;
}>();

const updateValue = (event: KucEvent<ComboboxChangeEventDetail>) => {
  emit('change', { detail: { value: buildResult() } });
};

function buildResult() {
  return '';
}

const fromOptions = [
  { label: '日', value: 'DAYS' },
  { label: '周', value: 'WEEKS' },
  { label: '月', value: 'MONTHS' },
  { label: '年', value: 'YEARS' },
];

const weekOptions = [
  { label: 'すべての曜日', value: '' },
  { label: '日', value: 'SUNDAY' },
  { label: '月', value: 'MONDAY' },
  { label: '火', value: 'TUESDAY' },
  { label: '水', value: 'WEDNESDAY' },
  { label: '木', value: 'THURSDAY' },
  { label: '金', value: 'FRIDAY' },
  { label: '土', value: 'SATURDAY' },
];

const monthOptions = [{ label: 'すべて', value: '' }];
for (let i = 1; i <= 31; i++) {
  monthOptions.push({ label: i.toString() + '日', value: i.toString() });
}
monthOptions.push({ label: '末日', value: 'LAST' });
</script>
