<script setup lang="ts">
import { selectFilterOptionRefMod } from 'stores/utils';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import { onMounted, watch } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import DatePicker from 'src/components/shared/DatePicker.vue';

const { locale } = useI18n({ useScope: 'global' });

const employmentOffice = defineModel<string>('employmentOffice');
const bussinessType = defineModel<string>('bussinessType');
const jobPosition = defineModel<string>('jobPosition');

const bussinessTypeEN = defineModel<string>('bussinessTypeEn');
const jobPositionEN = defineModel<string>('jobPositionEn');

const jobDescription = defineModel<string>('jobDescription');

const payDate = defineModel<Date | null | string>('payDate');
const wageRate = defineModel<number>('wageRate');

const saleEmployee = defineModel<string>('saleEmployee');

const rawOption = ref();

const typeBusinessOption = ref([]);
const jobPositionOption = ref([]);

defineProps<{
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  prefixId: string;
}>();

onMounted(async () => {
  const resultOption = await fetch('/option/option.json');
  rawOption.value = await resultOption.json();

  if (locale.value === 'eng') {
    typeBusinessOption.value = rawOption.value.eng.businessType;
    jobPositionOption.value = rawOption.value.eng.position;
  }
  if (locale.value === 'tha') {
    typeBusinessOption.value = rawOption.value.tha.businessType;
    jobPositionOption.value = rawOption.value.tha.position;
  }
});
watch(typeBusinessOption, () => {
  typeBusinessFilter = selectFilterOptionRefMod(
    typeBusinessOption,
    typeBusinessOptions,
    'label',
  );
});

watch(jobPositionOption, () => {
  jobPositionFilter = selectFilterOptionRefMod(
    jobPositionOption,
    jobPositionOptions,
    'label',
  );
});

const typeBusinessOptions = ref<Record<string, unknown>[]>([]);
let typeBusinessFilter = selectFilterOptionRefMod(
  typeBusinessOption,
  typeBusinessOptions,
  'label',
);

const jobPositionOptions = ref<Record<string, unknown>[]>([]);
let jobPositionFilter = selectFilterOptionRefMod(
  jobPositionOption,
  jobPositionOptions,
  'label',
);
</script>
<template>
  <div class="col-12 row q-col-gutter-sm">
    <q-input
      lazy-rules="ondemand"
      :for="`${prefixId}-input-employment-office`"
      :id="`${prefixId}-input-employment-office`"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-12"
      :label="$t('inputCustomerAddress')"
      v-model="employmentOffice"
    />

    <q-select
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      input-debounce="0"
      option-value="value"
      option-label="label"
      lazy-rules="ondemand"
      v-model="bussinessType"
      class="col-md-6 col-12"
      :dense="dense"
      :readonly="readonly"
      :label="$t('businessType')"
      :options="typeBusinessOptions"
      :for="`${prefixId}-select-business-type`"
      @filter="typeBusinessFilter"
    >
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">
            {{ $t('general.noData') }}
          </q-item-section>
        </q-item>
      </template>
    </q-select>

    <q-input
      lazy-rules="ondemand"
      :for="`${prefixId}-input-bussiness-type-en`"
      :id="`${prefixId}-input-bussiness-type-en`"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-6 col-12"
      :label="$t('businessTypeEN')"
      v-model="bussinessTypeEN"
    />

    <q-select
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      input-debounce="0"
      option-value="value"
      option-label="label"
      lazy-rules="ondemand"
      v-model="jobPosition"
      class="col-md-6 col-12"
      :dense="dense"
      :readonly="readonly"
      :label="$t('jobPosition')"
      :options="jobPositionOptions"
      :for="`${prefixId}-select-job-position`"
      @filter="jobPositionFilter"
    >
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">
            {{ $t('general.noData') }}
          </q-item-section>
        </q-item>
      </template>
    </q-select>

    <q-input
      lazy-rules="ondemand"
      :for="`${prefixId}-input-job-position-en`"
      :id="`${prefixId}-input-job-position-en`"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-6 col-12"
      :label="$t('jobPositionEN')"
      v-model="jobPositionEN"
    />

    <q-input
      lazy-rules="ondemand"
      :for="`${prefixId}-input-job-description`"
      :id="`${prefixId}-input-job-description`"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-6 col-12"
      :label="$t('jobDescription')"
      v-model="jobDescription"
    />

    <DatePicker
      :id="`${prefixId}-date-picker-pay-date`"
      v-model="payDate"
      :label="$t('payDay')"
      :readonly="readonly"
      clearable
    />

    <q-input
      lazy-rules="ondemand"
      :for="`${prefixId}-input-pay-rate`"
      :id="`${prefixId}-input-pay-rate`"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-md-3 col-6"
      :label="$t('payRate')"
      v-model="wageRate"
    />

    <q-input
      lazy-rules="ondemand"
      :for="`${prefixId}-input-sales-person`"
      :id="`${prefixId}-input-sales-person`"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('salesPerson')"
      v-model="saleEmployee"
    />
  </div>
</template>
