<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;

  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) {
    passportTypeFilter = selectFilterOptionRefMod(
      ref(optionStore.globalOption.nationality),
      passportTypeOptions,
      'label',
    );
    passportIssuingCountryFilter = selectFilterOptionRefMod(
      ref(optionStore.globalOption.nationality),
      passportIssuingCountryOptions,
      'label',
    );
  }
});

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

<template>
  <div class="row col-12">
    <div 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)"
      />
      {{ $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"
        lazy-rules="ondemand"
        v-model="passportType"
        class="col-md-3 col-12"
        :dense="dense"
        :readonly="readonly"
        :hide-dropdown-icon="readonly"
        :options="passportTypeOptions"
        :for="`${prefixId}-select-passport-type`"
        :label="$t('customerEmployee.form.passportType')"
        :rules="[
          (val: string) =>
            !!val || $t('selectValidate') + $t('formDialogInputPassportType'),
        ]"
        @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
        lazy-rules="ondemand"
        :for="`${prefixId}-input-passport-no`"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-md-3 col-6"
        :label="$t('customerEmployee.form.passportNo')"
        v-model="passportNumber"
        :rules="[
          (val: string) =>
            !!val || $t('inputValidate') + $t('formDialogInputPassportNo'),
        ]"
      />
      <q-input
        lazy-rules="ondemand"
        :for="`${prefixId}-input-passport-ref`"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('customerEmployee.form.passportRef')"
        :model-value="
          readonly
            ? previousPassportReference || '-'
            : previousPassportReference
        "
        @update:model-value="
          (v) => (typeof v === 'string' ? (previousPassportReference = v) : '')
        "
      />
      <q-input
        lazy-rules="ondemand"
        :for="`${prefixId}-input-passport-place`"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-md-3 col-6"
        :label="$t('customerEmployee.form.passportPlace')"
        v-model="passportIssuingPlace"
        :rules="[
          (val: string) =>
            !!val || $t('inputValidate') + $t('formDialogInputWPassportPlace'),
        ]"
      />
      <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"
        class="col-md-3 col-6"
        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: string) =>
            !!val ||
            $t('selectValidate') + $t('formDialogInputPassportCountry'),
        ]"
        @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-md-3 col-6"
        :readonly="readonly"
        :rules="[
          (val: string) =>
            !!val ||
            $t('selectValidate') + $t('formDialogInputPassportIssuance'),
        ]"
      />
      <DatePicker
        :id="`${prefixId}-date-picker-passport-expire`"
        :label="$t('customerEmployee.form.passportExpireDate')"
        v-model="passportExpiryDate"
        class="col-md-3 col-6"
        :readonly="readonly"
        :rules="[
          (val: string) =>
            !!val || $t('selectValidate') + $t('formDialogInputPassportExpire'),
        ]"
      />
    </div>
  </div>
</template>

<style scoped></style>
