<script setup lang="ts">
import { isRoleInclude } from 'src/stores/utils';
import DatePicker from '../shared/DatePicker.vue';

const code = defineModel<string>('code');
const branchCount = defineModel<number>('branchCount', { default: 0 });
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');
const virtual = defineModel<boolean>('virtual');

const permitExpireDate = defineModel<Date>('permitExpireDate');
const permitIssueDate = defineModel<Date>('permitIssueDate');
const permitNo = defineModel<string>('permitNo');

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

function formatCode(input: string | undefined, type: 'code' | 'number') {
  if (!input) return;
  const code = input.slice(0, -5);
  const number = input.slice(-5);
  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
          :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) || $t('form.error.required'),
            (val) =>
              (val && val.length > 0 && /^[a-zA-Z0-9]+$/.test(val)) ||
              $t('form.error.invalidCustomeMessage', {
                msg: $t('form.error.letterAndNumOnly'),
              }),
          ]"
          @update:model-value="(v) => (abbreviation = v as string)"
        />
        <q-input
          :dense="dense"
          outlined
          readonly
          :disable="!readonly"
          hide-bottom-space
          class="col-md col-7"
          :label="$t('branch.form.code')"
          for="input-code"
          :model-value="
            typeBranch === 'headOffice'
              ? view
                ? formatCode(code, 'number')
                : '00000'
              : view
                ? onCreate
                  ? (branchCount + 1).toString().padStart(5, '0')
                  : formatCode(codeSubBranch, 'number')
                : codeSubBranch
          "
          @update:model-value="(v) => (code = v as string)"
        />

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

      <div class="col-12 row q-col-gutter-sm">
        <q-input
          :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
          :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 || $t('form.error.required'),
            (val) =>
              /^[A-Za-z0-9\s.]+$/.test(val) || $t('form.error.letterOnly'),
          ]"
          for="input-name-en"
        />

        <q-select
          v-if="
            typeBranch !== 'headOffice' &&
            isRoleInclude(['head_of_admin', 'head_of_account'])
          "
          outlined
          use-input
          fill-input
          emit-value
          map-options
          hide-selected
          hide-bottom-space
          input-debounce="0"
          option-label="label"
          option-value="value"
          class="col-2"
          dense
          for="input-branch-status"
          :readonly="readonly || isRoleInclude(['head_of_account'])"
          :options="['Virtual', 'Branch']"
          :hide-dropdown-icon="readonly"
          :label="$t('general.branchStatus')"
          :model-value="virtual ? 'Virtual' : 'Branch'"
          @update:model-value="(v) => (virtual = v === 'Virtual')"
          :rules="[(val) => val && val.length > 0]"
          :error-message="$t('form.error.required')"
        >
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-grey">
                {{ $t('general.noData') }}
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>

      <div class="col-12 row q-col-gutter-sm">
        <q-input
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-4"
          :label="$t('general.licenseNumber')"
          v-model="permitNo"
          :rules="[(val) => val && val.length > 0]"
          :error-message="$t('form.error.required')"
          for="input-name"
        />

        <DatePicker
          class="col-3"
          id="input-start-date"
          :readonly="readonly"
          :label="$t('general.dateOfIssue')"
          v-model="permitIssueDate"
          clearable
        />

        <DatePicker
          class="col-3"
          id="input-start-date"
          :readonly="readonly"
          :label="$t('general.expirationDate')"
          v-model="permitExpireDate"
          clearable
        />
      </div>
    </div>
  </div>
</template>
