<script lang="ts" setup>
import { ref, watch } from 'vue';
import { QSelect } from 'quasar';
import { selectFilterOptionRefMod } from 'stores/utils';
import { getRole } from 'src/services/keycloak';
import { onMounted } from 'vue';

defineProps<{
  prefixId?: string;
  outlined?: boolean;
  readonly?: boolean;
  customerType?: 'CORP' | 'PERS';
}>();

const personName = defineModel<string>('personName', { required: true });
const customerName = defineModel<string>('customerName', { required: true });
const customerNameEN = defineModel<string>('customerNameEn', {
  required: true,
});
const taxNo = defineModel<string | null>('taxNo');
const registeredBranchId = defineModel<string>('registeredBranchId', {
  required: true,
});

const branchOptions = defineModel<{ id: string; name: string }[]>(
  'branchOptions',
  { default: [] },
);
const filteredBranchOptions = ref<Record<string, unknown>[]>([]);

let branchFilter: (
  value: string,
  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;

onMounted(() => {
  branchFilter = selectFilterOptionRefMod(
    branchOptions,
    filteredBranchOptions,
    'name',
  );
});

watch(
  () => branchOptions.value,
  () => {
    branchFilter = selectFilterOptionRefMod(
      branchOptions,
      filteredBranchOptions,
      'name',
    );
  },
);
</script>

<template>
  <div class="row q-col-gutter-sm">
    <div class="col-12 text-weight-bold text-body1 row items-center">
      <q-icon
        flat
        size="xs"
        class="q-pa-sm rounded q-mr-xs"
        color="info"
        name="mdi-office-building-outline"
        style="background-color: var(--surface-3)"
      />
      <span>{{ $t('customer.form.group.basicInfo') }}</span>
      <q-btn
        v-if="!readonly"
        type="submit"
        dense
        unelevated
        color="primary"
        :label="$t('save')"
        @click="$emit('save')"
        class="q-px-md q-ml-auto rounded"
      />
    </div>
    <q-select
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      dense
      class="col-12 col-md-4"
      option-value="id"
      input-debounce="0"
      option-label="name"
      lazy-rules="ondemand"
      v-model="registeredBranchId"
      :readonly="readonly"
      :options="filteredBranchOptions"
      :hide-dropdown-icon="readonly"
      :label="$t('registeredBranch')"
      :for="`${prefixId}-input-source-nationality`"
      :rules="[
        (val) => {
          const roles = getRole() || [];
          return (
            ['admin', 'system', 'head_of_admin'].some((v) =>
              roles.includes(v),
            ) ||
            !!val ||
            $t('form.error.required')
          );
        },
      ]"
      @filter="branchFilter"
    >
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">
            {{ $t('noResults') }}
          </q-item-section>
        </q-item>
      </template>
    </q-select>
    <q-input
      lazy-rules="ondemand"
      dense
      outlined
      hide-bottom-space
      :label="$t('customer.form.customerName')"
      v-model="customerName"
      class="col-12 col-md-4"
      :readonly="readonly"
      :for="`${prefixId}-input-company-name`"
    />
    <q-input
      lazy-rules="ondemand"
      dense
      outlined
      :readonly="readonly"
      hide-bottom-space
      :label="$t('customer.form.customerNameEN')"
      v-model="customerNameEN"
      :for="`${prefixId}-input-company-name-en`"
      class="col-12 col-md-4"
    />
    <q-input
      lazy-rules="ondemand"
      dense
      outlined
      :readonly="readonly"
      hide-bottom-space
      v-model="personName"
      :label="$t('customer.form.personName')"
      :for="`${prefixId}-input-person-name`"
      :rules="[(v: string) => !!v || $t('form.error.required')]"
      class="col-12 col-md-4"
    />
    <q-input
      lazy-rules="ondemand"
      dense
      outlined
      v-if="customerType === 'PERS'"
      :readonly="readonly"
      hide-bottom-space
      :label="$t('customer.form.taxIdentificationNumber')"
      v-model="taxNo"
      :for="`${prefixId}-input-tax-no`"
      class="col-12 col-md-4"
    />
  </div>
</template>
