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

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

const passportType = defineModel<string>('passportType');
const passportNumber = defineModel<string>('passportNumber');
const passportIssueDate = defineModel<Date | null | string>(
  'passportIssueDate',
);
const passportExpiryDate = defineModel<Date | null | string>(
  'passportExpiryDate',
);
const passportIssuingCountry = defineModel<string>('passportIssuingCountry');
const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
const previousPassportReference = defineModel<string>(
  'previousPassportReference',
);

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

  prefixId: string;
}>();

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

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

onMounted(() => {
  if (
    optionStore.globalOption?.nationality &&
    optionStore.globalOption?.passportType
  ) {
    passportTypeFilter = selectFilterOptionRefMod(
      ref(optionStore.globalOption.passportType),
      passportTypeOptions,
      'label',
    );
    passportIssuingCountryFilter = selectFilterOptionRefMod(
      ref(optionStore.globalOption.nationality),
      passportIssuingCountryOptions,
      'label',
    );
  }
});

watch(
  () => optionStore.globalOption,
  () => {
    passportTypeFilter = selectFilterOptionRefMod(
      ref(optionStore.globalOption.passportType),
      passportTypeOptions,
      'label',
    );
    passportIssuingCountryFilter = selectFilterOptionRefMod(
      ref(optionStore.globalOption.nationality),
      passportIssuingCountryOptions,
      'label',
    );
  },
);
</script>

<template>
  <div class="row col-12">
    <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-passport"
        style="background-color: var(--surface-3)"
      />
      {{ 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"
        v-model="passportType"
        class="col-12"
        :class="{ 'col-md-3': !ocr }"
        :dense="dense"
        :readonly="readonly"
        :hide-dropdown-icon="readonly"
        :options="passportTypeOptions"
        :for="`${prefixId}-select-passport-type`"
        :label="$t('customerEmployee.form.passportType')"
        :rules="[
          (val) =>
            (val && val.length > 0) ||
            $t('form.error.selectField', {
              field: $t('customerEmployee.form.passportType'),
            }),
        ]"
        @filter="passportTypeFilter"
      >
        <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-passport-no`"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
        :label="$t('customerEmployee.form.passportNo')"
        v-model="passportNumber"
        :rules="[(val) => (val && val.length > 0) || $t('form.error.required')]"
      />
      <q-input
        :for="`${prefixId}-input-passport-ref`"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        :class="{ 'col-12': ocr, 'col-6': !ocr }"
        :label="$t('customerEmployee.form.passportRef')"
        :model-value="
          readonly
            ? previousPassportReference || '-'
            : previousPassportReference
        "
        @update:model-value="
          (v) => (typeof v === 'string' ? (previousPassportReference = v) : '')
        "
      />
      <q-input
        :for="`${prefixId}-input-passport-place`"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
        :label="$t('customerEmployee.form.passportPlace')"
        v-model="passportIssuingPlace"
        :rules="[(val) => (val && val.length > 0) || $t('form.error.required')]"
      />
      <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-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
        v-model="passportIssuingCountry"
        :dense="dense"
        :readonly="readonly"
        :hide-dropdown-icon="readonly"
        :options="passportIssuingCountryOptions"
        :for="`${prefixId}-select-passport-country`"
        :label="$t('customerEmployee.form.passportIssuer')"
        :rules="[
          (val) =>
            (val && val.length > 0) ||
            $t('form.error.selectField', {
              field: $t('customerEmployee.form.passportIssuer'),
            }),
        ]"
        @filter="passportIssuingCountryFilter"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey">
              {{ $t('general.noData') }}
            </q-item-section>
          </q-item>
        </template>
      </q-select>
      <DatePicker
        :id="`${prefixId}-date-picker-passport-issueance`"
        :label="$t('customerEmployee.form.passportIssueDate')"
        v-model="passportIssueDate"
        class="col-6"
        :class="{ 'col-md-3': !ocr }"
        :readonly="readonly"
        :rules="[
          (val) =>
            (val && val.length > 0) ||
            $t('form.error.selectField', {
              field: $t('customerEmployee.form.passportIssueDate'),
            }),
        ]"
      />
      <DatePicker
        :id="`${prefixId}-date-picker-passport-expire`"
        :label="$t('customerEmployee.form.passportExpireDate')"
        v-model="passportExpiryDate"
        class="col-6"
        :class="{ 'col-md-3': !ocr }"
        :readonly="readonly"
        :rules="[
          (val) =>
            (val && val.length > 0) ||
            $t('form.error.selectField', {
              field: $t('customerEmployee.form.passportExpireDate'),
            }),
        ]"
      />
    </div>
  </div>
</template>

<style scoped></style>
