<script setup lang="ts">
import { CustomerBranch } from 'src/stores/customer/types';
import { onMounted, ref } from 'vue';

const personName = defineModel<string>('personName');
const customerName = defineModel<string>('customerName');
const customerNameEn = defineModel<string>('customerNameEn');
const registeredBranchId = defineModel<string>('registeredBranchId');
const taxNo = defineModel<string | null | undefined>('taxNo');

const employerID = defineModel<string>('employerID');

// employee
const customerBranch = defineModel<{
  id: string;
  address: string;
  addressEN: string;
  provinceId: string;
  districtId: string;
  subDistrictId: string;
  zipCode: string;
}>('customerBranch');
const employeeId = defineModel<string>('employeeId');
const nrcNo = defineModel<string>('nrcNo');

defineProps<{
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  typeCustomer?: string;
  employee?: boolean;
  optionsBranch?: { id: string; name: string }[];

  employeeOwnerOption?: CustomerBranch[];
}>();

defineEmits<{
  (e: 'filterOwnerBranch', val: string, update: void): void;
}>();

onMounted(async () => {});
</script>

<template>
  <div class="col-3 app-text-muted">
    • {{ $t(`formDialogTitleInformation`) }}
  </div>
  <div v-if="!employee" class="col-9 row q-col-gutter-md">
    <q-select
      id="input-source-nationality"
      :dense="dense"
      outlined
      :readonly="readonly"
      :hide-dropdown-icon="readonly"
      hide-bottom-space
      emit-value
      map-options
      options-dense
      :label="$t('registeredBranch')"
      class="col-12"
      option-label="name"
      option-value="id"
      v-model="registeredBranchId"
      :options="optionsBranch"
      :rules="[(val) => !!val]"
    />

    <q-input
      for="input-employer-id"
      id="input-employer-id"
      v-if="typeCustomer === 'PERS'"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('formDialogCustomerName')"
      v-model="personName"
    />
    <q-input
      for="input-tax-no"
      id="input-tax-no"
      v-if="typeCustomer === 'PERS'"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('taxNo')"
      v-model="taxNo"
        :rules="[
        (val) =>
          (val && val.length === 13 && /[0-9]+/.test(val)) ||
          $t('formDialogInputTaxNoValidate'),
      ]"
    />

    <q-input
      for="input-customer-name"
      id="input-customer-name"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-6"
      :label="
        $t(typeCustomer === 'PERS' ? 'corporationThai' : 'corporationThaiName')
      "
      v-model="customerName"
    />
    <q-input
      for="input-customer-name-en"
      id="input-customer-name-en"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-6"
      :label="
        $t(
          typeCustomer === 'PERS'
            ? 'corporationEnglish'
            : 'corporationEnglishName',
        )
      "
      v-model="customerNameEn"
    />

    <q-input
      v-if="typeCustomer !== 'PERS'"
      for="input-owner-name"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('companyOwnerName')"
      v-model="personName"
    />
  </div>

  <div v-if="employee" class="col-9 row q-col-gutter-md">
    <q-select
      for="select-employer-branch"
      :use-input="!customerBranch"
      input-debounce="0"
      :hide-dropdown-icon="readonly"
      :dense="dense"
      outlined
      :readonly="readonly || customerBranch !== undefined"
      hide-bottom-space
      class="col-12"
      :label="$t('formDialogEmployerBranchCode')"
      v-model="customerBranch"
      :option-value="
        (v) => ({
          id: v.id,
          address: v.address,
          addressEN: v.addressEN,
          provinceId: v.provinceId,
          districtId: v.districtId,
          subDistrictId: v.subDistrictId,
          zipCode: v.zipCode,
        })
      "
      emit-value
      map-options
      :options="employeeOwnerOption"
      @filter="(val, update) => $emit('filterOwnerBranch', val, update)"
      :rules="[
        (val: string) =>
          !!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
      ]"
    >
      <template v-slot:option="scope">
        <q-item
          v-if="scope.opt"
          v-bind="scope.itemProps"
          class="row items-start col-12 no-padding"
        >
          <div class="q-ma-sm">
            <i class="isax isax-frame5" style="color: var(--brand-1)" />
          </div>
          <div class="q-mt-sm">
            <div>
              {{ scope.opt.code }} {{ $t('branchName') }}:
              {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
            </div>

            <div class="text-caption app-text-muted-2 q-mb-xs">
              <div v-if="scope.opt.customer" class="col column">
                <span>
                  {{ $t('customerBranchName') }}:
                  {{
                    $i18n.locale === 'en-US'
                      ? scope.opt.customer.customerNameEN
                      : scope.opt.customer.customerName
                  }}
                </span>
                <span>
                  {{
                    scope.opt.customer.customerType === 'PERS'
                      ? $t('formDialogCustomerName')
                      : $t('companyOwnerName')
                  }}:
                  {{
                    $i18n.locale === 'en-US'
                      ? scope.opt.customer.personName
                      : scope.opt.customer.personName
                  }}
                </span>
              </div>
              <div v-if="scope.opt.province" class="col">
                {{ $t('address') }}
                {{
                  $i18n.locale === 'en-US'
                    ? scope.opt.addressEN
                    : scope.opt.address
                }}
                {{
                  $i18n.locale === 'en-US'
                    ? scope.opt.subDistrict.nameEN
                    : scope.opt.subDistrict.name
                }}
                {{
                  $i18n.locale === 'en-US'
                    ? scope.opt.district.nameEN
                    : scope.opt.district.name
                }}
                {{
                  $i18n.locale === 'en-US'
                    ? scope.opt.province.nameEN
                    : scope.opt.province.name
                }}
                {{ scope.opt.zipCode }}
              </div>
            </div>
          </div>
        </q-item>
        <q-separator class="q-mx-sm" />
      </template>

      <template v-slot:selected-item="scope">
        <div v-if="scope.opt" class="row items-center no-wrap">
          <div class="q-mr-sm">
            {{ scope.opt.code }}

            {{ $t('branchName') }}:
            {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
          </div>
          <div
            class="text-caption app-text-muted-2 ellipsis col"
            style="max-width: 26vw"
            v-if="scope.opt.customer && scope.opt.province"
          >
            {{ $t('customerBranchName') }}:
            {{
              $i18n.locale === 'en-US'
                ? scope.opt.customer.customerNameEN
                : scope.opt.customer.customerName
            }}
            {{
              scope.opt.customer.customerType === 'PERS'
                ? $t('formDialogCustomerName')
                : $t('companyOwnerName')
            }}:
            {{
              $i18n.locale === 'en-US'
                ? scope.opt.customer.personName
                : scope.opt.customer.personName
            }}
            {{ $t('address') }}
            {{
              $i18n.locale === 'en-US' ? scope.opt.addressEN : scope.opt.address
            }}
            {{
              $i18n.locale === 'en-US'
                ? scope.opt.subDistrict.nameEN
                : scope.opt.subDistrict.name
            }}
            {{
              $i18n.locale === 'en-US'
                ? scope.opt.district.nameEN
                : scope.opt.district.name
            }}
            {{
              $i18n.locale === 'en-US'
                ? scope.opt.province.nameEN
                : scope.opt.province.name
            }}
            {{ scope.opt.zipCode }}
            <q-tooltip v-if="scope.opt.customer && scope.opt.province">
              {{ $t('customerBranchName') }}:
              {{
                $i18n.locale === 'en-US'
                  ? scope.opt.customer.customerNameEN
                  : scope.opt.customer.customerName
              }}
              {{
                scope.opt.customer.customerType === 'PERS'
                  ? $t('formDialogCustomerName')
                  : $t('companyOwnerName')
              }}:
              {{
                $i18n.locale === 'en-US'
                  ? scope.opt.customer.personName
                  : scope.opt.customer.personName
              }}
              {{ $t('address') }}
              {{
                $i18n.locale === 'en-US'
                  ? scope.opt.addressEN
                  : scope.opt.address
              }}
              {{
                $i18n.locale === 'en-US'
                  ? scope.opt.subDistrict.nameEN
                  : scope.opt.subDistrict.name
              }}
              {{
                $i18n.locale === 'en-US'
                  ? scope.opt.district.nameEN
                  : scope.opt.district.name
              }}
              {{
                $i18n.locale === 'en-US'
                  ? scope.opt.province.nameEN
                  : scope.opt.province.name
              }}
              {{ scope.opt.zipCode }}
            </q-tooltip>
          </div>
        </div>
      </template>

      <template v-slot:append>
        <q-icon
          v-if="!readonly && customerBranch"
          name="mdi-close-circle"
          @click.stop="customerBranch = undefined"
          class="cursor-pointer clear-btn"
        />
      </template>
    </q-select>
    <q-input
      for="input-employeeID"
      :dense="dense"
      outlined
      :readonly="true"
      hide-bottom-space
      class="col-6"
      :label="$t('formDialogEmployeeID')"
      v-model="employeeId"
    />
    <q-input
      mask="## #### ###### #"
      for="input-nrcNo"
      :dense="dense"
      outlined
      :readonly="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('formDialogEmployeeNRCNo')"
      v-model="nrcNo"
      :rules="[
        (val: string) =>
          !!val || $t('inputValidate') + $t('formDialogEmployeeNRCNo'),
      ]"
    />
  </div>

  <q-separator
    v-if="separator"
    class="col-12 q-mt-xl q-mb-md"
    style="padding-block: 0.5px"
  />
</template>

<style scoped lang="scss">
.clear-btn {
  opacity: 50%;
  transition: opacity 0.2s ease-in-out;
  &:hover {
    opacity: 100%;
  }
}
</style>
