<script setup lang="ts">
import { QSelect } from 'quasar';
import { onMounted, reactive, ref } from 'vue';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import useAddressStore, {
  District,
  Province,
  SubDistrict,
} from 'stores/address';
import { useI18n } from 'vue-i18n';
import { selectFilterOptionRefMod } from 'stores/utils';
import useOptionStore from 'stores/options';
import { watch } from 'vue';
import DatePicker from '../shared/DatePicker.vue';

const optionStore = useOptionStore();
const { locale } = useI18n();
const adrressStore = useAddressStore();

const addrOptions = reactive<{
  provinceOps: Province[];
  districtOps: District[];
  subDistrictOps: SubDistrict[];
}>({
  provinceOps: [],
  districtOps: [],
  subDistrictOps: [],
});

const visaType = defineModel<string>('visaType');
const visaNumber = defineModel<string>('visaNumber');
const visaIssueDate = defineModel<Date | null | string>('visaIssueDate');
const visaExpiryDate = defineModel<Date | null | string>('visaExpiryDate');
const visaIssuingPlace = defineModel<string>('visaIssuingPlace');
const visaStayUntilDate = defineModel<Date | null | string>(
  'visaStayUntilDate',
);
const tm6Number = defineModel<string>('tm6Number');
const entryDate = defineModel<Date | null | string>('entryDate');

defineProps<{
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  typeCustomer?: string;
  prefixId: string;

  ocr?: boolean;
}>();

async function fetchProvince() {
  const result = await adrressStore.fetchProvince();

  if (result) addrOptions.provinceOps = result;
}

onMounted(async () => {
  await fetchProvince();
});

const visaTypeOptions = ref<Record<string, unknown>[]>([]);
let visaTypeFilter: (
  value: string,
  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;

onMounted(() => {
  visaTypeFilter = selectFilterOptionRefMod(
    ref(optionStore.globalOption?.nationality),
    visaTypeOptions,
    'label',
  );
});

watch(
  () => optionStore.globalOption,
  () => {
    visaTypeFilter = selectFilterOptionRefMod(
      optionStore.globalOption.nationality,
      visaTypeOptions,
      'label',
    );
  },
);
</script>

<template>
  <div class="row">
    <div v-if="!ocr" class="col-12 q-pb-sm text-weight-bold text-body1">
      <q-icon
        flat
        size="xs"
        class="q-pa-sm rounded q-mr-xs"
        color="info"
        name="mdi-notebook-outline"
        style="background-color: var(--surface-3)"
      />
      {{ $t(`${title}`) }}
    </div>
    <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
        input-debounce="0"
        option-value="value"
        option-label="label"
        :class="{ 'col-4': !ocr, 'col-6': ocr }"
        :dense="dense"
        :readonly="readonly"
        :options="visaTypeOptions"
        :hide-dropdown-icon="readonly"
        :for="`${prefixId}-select-visa-type`"
        :label="$t('customerEmployee.form.visaType')"
        @filter="visaTypeFilter"
        :model-value="readonly ? visaType || '-' : visaType"
        @update:model-value="
          (v) => (typeof v === 'string' ? (visaType = v) : '')
        "
        @clear="visaType = ''"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey">
              {{ $t('general.noData') }}
            </q-item-section>
          </q-item>
        </template>
      </q-select>
      <!-- :rules="[
        (val: string) =>
          !!val || $t('selectValidate') + $t('formDialogInputVisaType'),
      ]" -->
      <q-input
        :for="`${prefixId}-input-visa-no`"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        :class="{ 'col-4': !ocr, 'col-6': ocr }"
        :label="$t('customerEmployee.form.visaNo')"
        :model-value="readonly ? visaNumber || '-' : visaNumber"
        @update:model-value="
          (v) => (typeof v === 'string' ? (visaNumber = v) : '')
        "
      />
      <!-- :rules="[
        (val: string) =>
          !!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
      ]" -->
      <DatePicker
        :class="{ 'col-2': !ocr, 'col-6': ocr }"
        :id="`${prefixId}-date-picker-visa-issuance`"
        :readonly="readonly"
        :label="$t('customerEmployee.form.visaIssuance')"
        v-model="visaIssueDate"
        clearable
      />
      <DatePicker
        :class="{ 'col-2': !ocr, 'col-6': ocr }"
        :id="`${prefixId}-date-picker-visa-expire`"
        :readonly="readonly"
        :label="$t('customerEmployee.form.visaExpire')"
        v-model="visaExpiryDate"
        clearable
      />

      <q-input
        :for="`${prefixId}-input-visa-place`"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        :class="{ 'col-5': !ocr, 'col-6': ocr }"
        :label="$t('customerEmployee.form.visaPlace')"
        :model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
        @update:model-value="
          (v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
        "
      />
      <!-- :rules="[
        (val: string) =>
          !!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
      ]" -->
      <DatePicker
        :class="{ 'col-4': !ocr, 'col-6': ocr }"
        :id="`${prefixId}-date-picker-visa-until`"
        :readonly="readonly"
        :label="$t('customerEmployee.form.visaStayUntil')"
        v-model="visaStayUntilDate"
        clearable
      />

      <q-input
        :for="`${prefixId}-input-tm6`"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        :class="{ 'col-5': !ocr, 'col-6': ocr }"
        :label="$t('customerEmployee.form.visaTM6')"
        :model-value="readonly ? tm6Number || '-' : tm6Number"
        @update:model-value="
          (v) => (typeof v === 'string' ? (tm6Number = v) : '')
        "
        @clear="tm6Number = ''"
      />
      <!-- :rules="[
        (val: string) =>
          !!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
      ]" -->
      <DatePicker
        :class="{ 'col-4': !ocr, 'col-6': ocr }"
        :id="`${prefixId}-date-picker-visa-enter`"
        :readonly="readonly"
        :label="$t('customerEmployee.form.visaEnter')"
        v-model="entryDate"
        clearable
      />
    </div>
  </div>
</template>

<style scoped></style>
