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

const remark = defineModel<string>('remark');
const detail = defineModel<string>('detail');
const name = defineModel<string>('name');
const code = defineModel<string>('code');

const serviceCode = defineModel<string>('serviceCode');
const serviceName = defineModel<string>('serviceNameTh');
const serviceDescription = defineModel<string>('serviceDescription');
const registeredBranchId = defineModel<string>('registeredBranchId');

const optionsBranch = defineModel<{ id: string; name: string }[]>(
  'optionsBranch',
  { default: [] },
);

defineProps<{
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  isType?: boolean;
  disableCode?: boolean;
  service?: boolean;
}>();

const branchOptions = ref<Record<string, unknown>[]>([]);
let branchFilter = selectFilterOptionRefMod(
  optionsBranch,
  branchOptions,
  'name',
);

watch(
  () => optionsBranch.value,
  () => {
    branchFilter = selectFilterOptionRefMod(
      optionsBranch,
      branchOptions,
      'name',
    );
  },
);
</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(`form.field.basicInformation`) }}
    </div>
    <div v-if="!service" class="col-12 row q-col-gutter-sm">
      <q-select
        outlined
        clearable
        use-input
        fill-input
        emit-value
        map-options
        hide-selected
        hide-bottom-space
        class="col-md-12 col-12"
        option-value="id"
        option-label="name"
        v-model="registeredBranchId"
        id="input-source-nationality"
        for="input-source-nationality"
        :dense="dense"
        :readonly="readonly"
        :options="branchOptions"
        :hide-dropdown-icon="readonly"
        :label="$t('productService.service.registeredBranch')"
        :rules="[
          (val) => {
            const roles = getRole() || [];
            const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
              (role) => roles.includes(role),
            );
            return (
              isSpecialRole ||
              !!val ||
              $t('form.error.selectField', {
                field: $t('productService.service.registeredBranch'),
              })
            );
          },
        ]"
        @filter="branchFilter"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey">
              {{ $t('general.noData') }}
            </q-item-section>
          </q-item>
        </template>
      </q-select>
      <q-input
        for="input-code"
        :dense="dense"
        outlined
        readonly
        :disable="!readonly"
        hide-bottom-space
        class="col-6"
        :label="
          $t(isType ? 'productService.type.code' : 'productService.group.code')
        "
        v-model="code"
      />
      <q-input
        for="input-name"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="
          $t(isType ? 'productService.type.name' : 'productService.group.name')
        "
        v-model="name"
        :rules="[(val: string) => !!val || $t('form.error.required')]"
      />
      <q-input
        for="input-detail"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        type="textarea"
        class="col-12"
        :label="$t('general.detail')"
        :model-value="readonly ? detail || '-' : detail"
        @update:model-value="(v) => (typeof v === 'string' ? (detail = v) : '')"
      />
      <q-input
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        type="textarea"
        class="col-12"
        :label="$t('general.remark')"
        :model-value="readonly ? remark || '-' : remark"
        @update:model-value="(v) => (typeof v === 'string' ? (remark = v) : '')"
        :for="`input-remark`"
      />
    </div>

    <div v-if="service" class="col-12 row q-col-gutter-sm">
      <q-input
        id="input-service-code"
        for="input-service-code"
        :disable="!readonly && disableCode"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-md-4 col-12"
        :label="$t('productService.service.code')"
        v-model="serviceCode"
        :rules="[(val: string) => !!val || $t('form.error.required')]"
      />

      <q-input
        id="input-service-name"
        for="input-service-name"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-md-8 col-12"
        :label="$t('productService.service.name')"
        v-model="serviceName"
        :rules="[(val: string) => !!val || $t('form.error.required')]"
      />

      <q-input
        id="input-service-description"
        for="input-service-description"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        type="textarea"
        class="col-12"
        :label="$t('general.detail')"
        :model-value="readonly ? serviceDescription || '-' : serviceDescription"
        @update:model-value="
          (v) => (typeof v === 'string' ? (serviceDescription = v) : '')
        "
      />
    </div>
  </div>
</template>

<style scoped></style>
