<script setup lang="ts">
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';

const id = defineModel<string>('id');
const branchNo = defineModel<number>('branchNo');
const code = defineModel<string>('code');
const taxNo = defineModel<string | null>('taxNo');
const name = defineModel<string>('name');
const nameEN = defineModel<string>('nameEn');
const registerName = defineModel<string>('registerName');
const registerDate = defineModel<Date | null>('registerDate');
const authorizedCapital = defineModel<string>('authorizedCapital');

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

<template>
  <div class="row q-col-gutter-md">
    <q-input
      lazy-rules="ondemand"
      dense
      outlined
      :readonly="!!id || readonly"
      hide-bottom-space
      :label="$t('customerBranch.form.no')"
      v-model="branchNo"
      :for="`${prefixId}-input-branch-branch-no`"
      type="number"
      class="col-12 col-md-2"
    />
    <q-input
      lazy-rules="ondemand"
      dense
      outlined
      readonly
      hide-bottom-space
      :label="$t('customerBranch.form.code')"
      :model-value="code || '-'"
      :for="`${prefixId}-input-branch-branch-code`"
      class="col-12 col-md-4"
    />
    <q-input
      lazy-rules="ondemand"
      dense
      outlined
      :readonly="readonly"
      hide-bottom-space
      :label="$t('customerBranch.form.taxNo')"
      v-model="taxNo"
      :for="`${prefixId}-input-branch-tax-no`"
      type="number"
      class="col-12 col-md-4"
    />
    <q-input
      lazy-rules="ondemand"
      dense
      outlined
      :readonly="readonly"
      hide-bottom-space
      :label="$t('customerBranch.form.name')"
      v-model="name"
      :for="`${prefixId}-input-branch-tax-no`"
      class="col-12 col-md-6"
    />
    <q-input
      lazy-rules="ondemand"
      dense
      outlined
      :readonly="readonly"
      hide-bottom-space
      :label="$t('customerBranch.form.nameEN')"
      v-model="nameEN"
      :for="`${prefixId}-input-branch-tax-no`"
      class="col-12 col-md-6"
    />
    <q-input
      lazy-rules="ondemand"
      dense
      outlined
      v-if="customerType === 'CORP'"
      :readonly="readonly"
      hide-bottom-space
      :label="$t('customerBranch.form.registerName')"
      v-model="registerName"
      :for="`${prefixId}-input-branch-register-name`"
      class="col-12 col-md-4"
    />
    <q-input
      lazy-rules="ondemand"
      dense
      outlined
      :readonly="readonly"
      hide-bottom-space
      v-if="customerType === 'CORP'"
      :label="$t('customerBranch.form.authorizedCapital')"
      v-model="authorizedCapital"
      :for="`${prefixId}-input-branch-authorized-capital`"
      class="col-12 col-md-4"
    />
    <VueDatePicker
      :id="`${prefixId}-picker-date-register-date`"
      :teleport="true"
      utc
      v-if="customerType === 'CORP'"
      auto-apply
      v-model="registerDate"
      :dark="$q.dark.isActive"
      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
      :enableTimePicker="false"
      :disabled="readonly"
      class="col-md-4 col-12"
    >
      <template #year="{ value }">
        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
      </template>
      <template #year-overlay-value="{ value }">
        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
      </template>
      <template #trigger>
        <q-input
          lazy-rules="ondemand"
          :for="`${prefixId}-input-start-date`"
          :id="`${prefixId}-input-start-date`"
          :label="$t('customerBranch.form.registerDate')"
          dense
          outlined
          :readonly="readonly"
          placeholder="DD/MM/YYYY"
          :mask="readonly ? '' : '##/##/####'"
          :model-value="
            registerDate
              ? readonly
                ? dateFormat(registerDate)
                : dateFormat(registerDate, false, false, true)
              : undefined
          "
          @update:model-value="
            (v) => {
              if (readonly && v && v.toString().length === 10) {
                const _date = parseAndFormatDate(v, $i18n.locale);
                if (_date) {
                  registerDate?.setDate(_date.getDate());
                  registerDate?.setMonth(_date.getMonth());
                  registerDate?.setFullYear(_date.getFullYear());
                } else {
                  registerDate = null;
                }
              }
            }
          "
        >
          <template v-slot:prepend>
            <q-icon
              size="xs"
              name="mdi-calendar-blank-outline"
              class="cursor-pointer"
              color="primary"
            />
          </template>
          <template v-slot:append>
            <q-icon
              v-if="!registerDate && readonly"
              name="mdi-close-circle"
              class="cursor-pointer app-text-muted"
              size="sm"
              @click="registerDate = null"
            />
          </template>
        </q-input>
      </template>
    </VueDatePicker>
  </div>
</template>
