<script setup lang="ts">
import { selectFilterOptionRefMod } from 'stores/utils';
import { onMounted, watch } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

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

const rawOption = ref();

const bussinessType = defineModel<string>('bussinessType');
const jobPosition = defineModel<string>('jobPosition');
const jobDescription = defineModel<string>('jobDescription');
const payDate = defineModel<string>('payDate');
const payDateEN = defineModel<string>('payDateEN');
const wageRate = defineModel<number>('wageRate');
const wageRateText = defineModel<string>('wageRateText');

const typeBusinessOption = ref([]);
const typeBusinessENOption = ref([]);
const jobPositionOption = ref([]);
const jobPositionENOption = 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();
  typeBusinessENOption.value = rawOption.value.eng.businessType;
  jobPositionENOption.value = rawOption.value.eng.position;

  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, typeBusinessENOption], () => {
  typeBusinessFilter = selectFilterOptionRefMod(
    typeBusinessOption,
    typeBusinessOptions,
    'label',
  );
  typeBusinessENFilter = selectFilterOptionRefMod(
    typeBusinessENOption,
    typeBusinessENOptions,
    'label',
  );
});

watch([jobPositionOption, jobPositionENOption], () => {
  jobPositionFilter = selectFilterOptionRefMod(
    jobPositionOption,
    jobPositionOptions,
    'label',
  );
  jobPositionENFilter = selectFilterOptionRefMod(
    jobPositionENOption,
    jobPositionENOptions,
    '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',
);

const typeBusinessENOptions = ref<Record<string, unknown>[]>([]);
let typeBusinessENFilter = selectFilterOptionRefMod(
  typeBusinessENOption,
  typeBusinessENOptions,
  'label',
);

const jobPositionENOptions = ref<Record<string, unknown>[]>([]);
let jobPositionENFilter = selectFilterOptionRefMod(
  jobPositionENOption,
  jobPositionENOptions,
  'label',
);
</script>
<template>
  <div class="col-12 row q-col-gutter-sm">
    <q-select
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      :hide-dropdown-icon="readonly"
      input-debounce="0"
      option-value="value"
      option-label="label"
      v-model="bussinessType"
      class="col-md-6 col-12"
      :dense="dense"
      :readonly="readonly"
      :label="$t('customer.form.businessType')"
      :options="typeBusinessOptions"
      :for="`${prefixId}-select-business-type`"
      @filter="typeBusinessFilter"
      :rules="[(val: string) => !!val || $t('form.error.required')]"
    >
      <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-select
      :for="`${prefixId}-input-bussiness-type-en`"
      :id="`${prefixId}-input-bussiness-type-en`"
      :label="`${$t('customer.form.businessType')} (EN)`"
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      :hide-dropdown-icon="readonly"
      input-debounce="0"
      option-value="value"
      option-label="label"
      v-model="bussinessType"
      class="col-md-6 col-12"
      :dense="dense"
      :readonly="readonly"
      :options="typeBusinessENOptions"
      @filter="typeBusinessENFilter"
      :rules="[(val: string) => !!val || $t('form.error.required')]"
    >
      <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-select
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      :hide-dropdown-icon="readonly"
      input-debounce="0"
      option-value="value"
      option-label="label"
      v-model="jobPosition"
      class="col-md-6 col-12"
      :dense="dense"
      :readonly="readonly"
      :label="$t('customer.form.jobPosition')"
      :options="jobPositionOptions"
      :for="`${prefixId}-select-job-position`"
      @filter="jobPositionFilter"
      :rules="[(val: string) => !!val || $t('form.error.required')]"
    >
      <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-select
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      :hide-dropdown-icon="readonly"
      input-debounce="0"
      option-value="value"
      option-label="label"
      v-model="jobPosition"
      class="col-md-6 col-12"
      :dense="dense"
      :readonly="readonly"
      :label="`${$t('customer.form.jobPosition')} (EN)`"
      :options="jobPositionENOptions"
      :for="`${prefixId}-input-job-position-en`"
      :id="`${prefixId}-input-job-position-en`"
      @filter="jobPositionENFilter"
      :rules="[(val: string) => !!val || $t('form.error.required')]"
    >
      <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
      :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('customer.form.jobDescription')"
      :model-value="readonly ? jobDescription || '-' : jobDescription"
      @update:model-value="
        (v) => (typeof v === 'string' ? (jobDescription = v) : '')
      "
    />

    <q-input
      :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('customer.form.payDay')"
      :model-value="readonly ? payDate || '-' : payDate"
      @update:model-value="(v) => (typeof v === 'string' ? (payDate = v) : '')"
    />

    <q-input
      :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="Pay day"
      :model-value="readonly ? payDateEN || '-' : payDateEN"
      @update:model-value="
        (v) => (typeof v === 'string' ? (payDateEN = v) : '')
      "
    />

    <q-input
      :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('customer.form.payRate')"
      v-model="wageRate"
    />

    <q-input
      :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('customer.form.payRate')} (Text)`"
      :model-value="readonly ? wageRateText || '-' : wageRateText"
      @update:model-value="
        (v) => (typeof v === 'string' ? (wageRateText = v) : '')
      "
    />
  </div>
</template>
