<script setup lang="ts">
import { QSelect } from 'quasar';
import { getRole } from 'src/services/keycloak';
import { selectFilterOptionRefMod } from 'src/stores/utils';
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
const { locale } = useI18n({ useScope: 'global' });

const remark = defineModel<string>('remark', { default: '' });
const detail = defineModel<string>('detail');
const process = defineModel<number>('process');
const name = defineModel<string>('name');
const code = defineModel<string>('code');

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

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

onMounted(async () => {
  const resultOption = await fetch('/option/option.json');
  const option = await resultOption.json();

  if (locale.value === 'en-US') {
    codeOption.value = option.eng.typeProduct;
  }
  if (locale.value === 'th-th') {
    codeOption.value = option.tha.typeProduct;
  }
});

const codeOptions = ref<Record<string, unknown>[]>([]);
const codeFilter = selectFilterOptionRefMod(codeOption, codeOptions, 'label');

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

<template>
  <div class="col-3 app-text-muted">
    • {{ $t(`formDialogTitleInformation`) }}
  </div>

  <div class="col-9 row q-col-gutter-md">
    <q-select
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      input-debounce="0"
      class="col-3"
      v-model="code"
      id="select-br-id"
      option-label="label"
      option-value="value"
      lazy-rules="ondemand"
      :dense="dense"
      :readonly="readonly"
      :options="codeOptions"
      :label="$t('productCode')"
      :hide-dropdown-icon="readonly"
      :rules="[(val: string) => !!val]"
      @filter="codeFilter"
    >
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">
            {{ $t('noResults') }}
          </q-item-section>
        </q-item>
      </template>
    </q-select>
    <q-select
      outlined
      clearable
      use-input
      fill-input
      emit-value
      map-options
      hide-selected
      hide-bottom-space
      input-debounce="0"
      class="col-3"
      option-value="id"
      option-label="name"
      lazy-rules="ondemand"
      id="input-source-nationality"
      v-model="registeredBranchId"
      :dense="dense"
      :readonly="readonly"
      :options="branchOptions"
      :hide-dropdown-icon="readonly"
      :label="$t('registeredBranch')"
      :rules="[
        (val) => {
          const roles = getRole() || [];
          const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
            (role) => roles.includes(role),
          );
          return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
        },
      ]"
      @filter="branchFilter"
    >
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">
            {{ $t('noResults') }}
          </q-item-section>
        </q-item>
      </template>
    </q-select>

    <q-input
      lazy-rules="ondemand"
      for="input-name"
      :dense="dense"
      outlined
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('productName')"
      v-model="name"
    />

    <q-input
      lazy-rules="ondemand"
      for="input-detail"
      :dense="dense"
      outlined
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      type="textarea"
      class="col-12"
      :label="$t('serviceDetail')"
      v-model="detail"
      autogrow
    />

    <div class="col-12">
      <q-field
        class="full-width"
        outlined
        :readonly="readonly"
        :borderless="readonly"
        :label="$t('detail')"
        stack-label
        dense
      >
        <q-editor
          dense
          v-model="remark"
          min-height="5rem"
          class="full-width q-mt-sm q-mb-xs"
          :flat="!readonly"
          :readonly="readonly"
          :toolbar-color="
            readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
          "
          :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
          style="
            cursor: auto;
            color: var(--foreground);
            border-color: var(--surface-3);
          "
        />
      </q-field>
    </div>

    <q-input
      lazy-rules="ondemand"
      for="input-process"
      :dense="dense"
      outlined
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-4"
      :label="$t('productProcessingTime')"
      v-model="process"
      type="number"
    />
  </div>

  <q-separator
    v-if="separator"
    class="col-12 q-mb-md"
    style="padding-block: 0.5px; margin-top: 32px"
  />
</template>

<style scoped>
.q-editor__toolbar {
  border-bottom: none !important;
}

:deep(.q-editor__toolbar.row.no-wrap.scroll-x) {
  background-color: var(--surface-2) !important;
}

:deep(.q-editor__toolbar) {
  border-color: var(--surface-3) !important;
}
</style>
