<script setup lang="ts">
const code = defineModel<string>('code');
const codeSubBranch = defineModel<string>('codeSubBranch');
const taxNo = defineModel<string>('taxNo');
const name = defineModel<string>('name');
const abbreviation = defineModel<string>('abbreviation');
const nameEN = defineModel<string>('nameEN');
const typeBranch = defineModel<string>('typeBranch');

defineProps<{
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  view?: boolean;
}>();

function formatCode(input: string | undefined, type: 'code' | 'number') {
  if (!input) return;
  const code = input.slice(0, -6);
  const number = input.slice(-6);
  if (type === 'code') return code;
  if (type === 'number') return number;
}
</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-office-building-outline"
        style="background-color: var(--surface-3)"
      />
      {{ $t(`${title}`) }}
    </div>

    <div class="col-12 row q-col-gutter-sm">
      <div class="col-12 row q-col-gutter-sm">
        <q-input
          lazy-rules="ondemand"
          :dense="dense"
          outlined
          :disable="view && !readonly"
          :readonly="readonly"
          hide-bottom-space
          class="col-md col-5"
          :label="$t('branch.form.abbrev')"
          for="input-abbreviation"
          :model-value="view ? formatCode(abbreviation, 'code') : abbreviation"
          :rules="[
            (val) =>
              (val && val.length > 0 && /^[a-zA-Z]+$/.test(val)) ||
              $t('form.error.invalid'),
          ]"
          @update:model-value="(v) => (abbreviation = v as string)"
        />
        <q-input
          lazy-rules="ondemand"
          :dense="dense"
          outlined
          readonly
          :disable="!readonly"
          hide-bottom-space
          class="col-md col-7"
          :label="$t('branch.form.code')"
          for="input-code"
          :model-value="view ? formatCode(code, 'number') : code"
          @update:model-value="(v) => (code = v as string)"
        />
        <q-input
          lazy-rules="ondemand"
          v-if="typeBranch !== 'headOffice'"
          :dense="dense"
          outlined
          :disable="view && !readonly"
          :readonly="readonly"
          hide-bottom-space
          class="col"
          :label="$t('branch.form.codeBranch')"
          for="input-code-sub-branch"
          :model-value="
            view ? formatCode(codeSubBranch, 'number') : codeSubBranch
          "
          @update:model-value="(v) => (codeSubBranch = v as string)"
        />

        <q-input
          lazy-rules="ondemand"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-md-5 col-12"
          :label="$t('branch.form.taxNo')"
          v-model="taxNo"
          :rules="[
            (val) => (val && val.length > 0) || $t('form.error.required'),
            (val) =>
              (val && val.length === 13 && /[0-9]+/.test(val)) ||
              $t('form.error.invalid'),
          ]"
          for="input-tax-no"
        />
      </div>

      <div class="col-12 row q-col-gutter-sm">
        <q-input
          lazy-rules="ondemand"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-md-6 col-12"
          :label="
            typeBranch === 'headOffice'
              ? $t('branch.form.headofficeName')
              : $t('branch.form.branchName')
          "
          v-model="name"
          :rules="[(val) => val && val.length > 0]"
          :error-message="$t('form.error.required')"
          for="input-name"
        />
        <q-input
          lazy-rules="ondemand"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-md-6 col-12"
          v-model="nameEN"
          :label="
            typeBranch === 'headOffice'
              ? $t('branch.form.headofficeNameEN')
              : $t('branch.form.branchNameEN')
          "
          :rules="[(val) => val && val.length > 0]"
          :error-message="$t('form.error.required')"
          for="input-name-en"
        />
      </div>
    </div>
  </div>
</template>
