<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import useAddressStore, {
  District,
  Province,
  SubDistrict,
} from 'src/stores/address';
import { EmployeeCheckupCreate } from 'src/stores/employee/types';
import { useI18n } from 'vue-i18n';
import { selectFilterOptionRefMod } from 'src/stores/utils';
import { QSelect } from 'quasar';

const { locale } = useI18n();
const adrressStore = useAddressStore();

const addrOptions = reactive<{
  provinceOps: Province[];
  districtOps: District[];
  subDistrictOps: SubDistrict[];
}>({
  provinceOps: [],
  districtOps: [],
  subDistrictOps: [],
});

const employeeCheckup = defineModel<EmployeeCheckupCreate[]>('employeeCheckup');
const checkupTypeOption = defineModel<{ label: string; value: string }[]>(
  'checkupTypeOption',
  { required: true },
);
const medicalBenefitOption = defineModel<{ label: string; value: string }[]>(
  'medicalBenefitOption',
  { required: true },
);
const insuranceCompanyOption = defineModel<{ label: string; value: string }[]>(
  'insuranceCompanyOption',
  { required: true },
);

const tab = ref();

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

async function fetchProvince() {
  const result = await adrressStore.fetchProvince();

  if (result) addrOptions.provinceOps = result;

  provinceFilter = selectFilterOptionRefMod(
    ref(addrOptions.provinceOps),
    provinceOptions,
    'name',
  );
}

function addData() {
  employeeCheckup.value?.push({
    coverageExpireDate: null,
    coverageStartDate: null,
    insuranceCompany: '',
    medicalBenefitScheme: '',
    remark: '',
    hospitalName: '',
    provinceId: '',
    checkupResult: '',
    checkupType: '',
  });
  if (employeeCheckup.value)
    tab.value = `tab${employeeCheckup.value.length - 1}`;
}

function removeData(index: number) {
  if (!employeeCheckup.value) return;
  if (employeeCheckup.value.length === 1) return;

  employeeCheckup.value.splice(index, 1);

  if (index) if (tab.value === `tab${index}`) tab.value = `tab${index - 1}`;
  if (tab.value === `tab${employeeCheckup.value.length}`)
    tab.value = `tab${employeeCheckup.value.length - 1}`;
}

onMounted(async () => {
  await fetchProvince();
  tab.value = 'tab0';
});

const provinceOptions = ref<Record<string, unknown>[]>([]);
let provinceFilter: (
  value: string,
  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;

const checkupTypeOptions = ref<Record<string, unknown>[]>([]);
const checkupTypeFilter = selectFilterOptionRefMod(
  checkupTypeOption,
  checkupTypeOptions,
  'label',
);

const medicalBenefitOptions = ref<Record<string, unknown>[]>([]);
const medicalBenefitFilter = selectFilterOptionRefMod(
  medicalBenefitOption,
  medicalBenefitOptions,
  'label',
);

const insuranceCompanyOptions = ref<Record<string, unknown>[]>([]);
const insuranceCompanyFilter = selectFilterOptionRefMod(
  insuranceCompanyOption,
  insuranceCompanyOptions,
  'label',
);
</script>

<template>
  <div class="full-height full-width column">
    <div class="bordered-b full-width row no-wrap">
      <q-btn
        @click="addData"
        flat
        class="app-text-muted"
        style="background-color: var(--_body-bg); min-width: 40px"
        icon="mdi-plus"
        padding="8px 8px"
        :disable="readonly"
        :color="$q.dark.isActive ? 'primary' : ''"
        :class="tab !== 'tab0' ? 'bordered-r' : ''"
      />
      <q-tabs
        inline-label
        mobile-arrows
        v-model="tab"
        dense
        class="text-grey col"
        active-class="active-tab"
        indicator-color="transparent"
        align="left"
        :breakpoint="0"
      >
        <q-tab
          v-for="(tab, index) in employeeCheckup"
          v-bind:key="index"
          :name="`tab${index}`"
          class="content-tab text-capitalize"
        >
          <div class="text-weight-medium row items-center no-wrap">
            {{ $t('formDialogTabCheckup') + (index + 1) }}
            <q-btn
              v-if="!readonly && employeeCheckup?.length !== 1"
              round
              flat
              :id="`${prefixId}-closeDialog`"
              size="sm"
              icon="mdi-close"
              padding="xs"
              color="red"
              :class="{ dark: $q.dark.isActive }"
              @click.stop="removeData(index)"
            />
          </div>
        </q-tab>
      </q-tabs>
    </div>

    <q-tab-panels v-model="tab" style="padding-top: 0px" class="col">
      <q-tab-panel
        v-for="(checkup, index) in employeeCheckup"
        v-bind:key="index"
        :name="`tab${index}`"
        class="row col-12 items-start"
        style="overflow: auto"
      >
        <div class="col-md-3 col-12 app-text-muted q-pb-sm">
          • {{ $t(`formDialogTitleHealthCheck`) }}
        </div>
        <div class="col-md-9 col-12 row q-col-gutter-md">
          <q-input
            lazy-rules="ondemand"
            :dense="dense"
            outlined
            :readonly="readonly"
            hide-bottom-space
            class="col-md-6 col-12"
            :label="$t('formDialogInputCheckupRes')"
            v-model="checkup.checkupResult"
          />
          <q-select
            outlined
            clearable
            use-input
            fill-input
            emit-value
            map-options
            hide-selected
            hide-bottom-space
            class="col-6"
            input-debounce="0"
            option-value="value"
            option-label="label"
            lazy-rules="ondemand"
            v-model="checkup.checkupType"
            :dense="dense"
            :readonly="readonly"
            :options="checkupTypeOptions"
            :hide-dropdown-icon="readonly"
            :id="`${prefixId}-select-checkup-type`"
            :label="$t('formDialogInputCheckupType')"
            @filter="checkupTypeFilter"
          >
            <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
            option-value="id"
            input-debounce="0"
            option-label="name"
            lazy-rules="ondemand"
            class="col-md-3 col-6"
            v-model="checkup.provinceId"
            :dense="dense"
            :readonly="readonly"
            :label="$t('province')"
            :hide-dropdown-icon="readonly"
            :id="`${prefixId}-select-province`"
            :options="provinceOptions"
            @filter="provinceFilter"
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  {{ $t('noResults') }}
                </q-item-section>
              </q-item>
            </template>
          </q-select>
          <!-- @filter="provinceFilter" -->
          <q-input
            lazy-rules="ondemand"
            :dense="dense"
            outlined
            :readonly="readonly"
            hide-bottom-space
            class="col-md-9 col-12"
            :label="$t('formDialogInputHospital')"
            v-model="checkup.hospitalName"
          />
          <q-input
            lazy-rules="ondemand"
            :label="$t('formDialogInputRemark')"
            :dense="dense"
            outlined
            :readonly="readonly"
            hide-bottom-space
            class="col-12"
            v-model="checkup.remark"
            type="textarea"
          />
          <q-select
            outlined
            clearable
            use-input
            fill-input
            emit-value
            map-options
            hide-selected
            hide-bottom-space
            class="col-6"
            input-debounce="0"
            option-value="value"
            option-label="label"
            lazy-rules="ondemand"
            v-model="checkup.medicalBenefitScheme"
            :dense="dense"
            :readonly="readonly"
            :hide-dropdown-icon="readonly"
            :options="medicalBenefitOptions"
            :id="`${prefixId}-select-province`"
            :label="$t('formDialogInputMedicalBenefit')"
            @filter="medicalBenefitFilter"
          >
            <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
            class="col-6"
            input-debounce="0"
            option-label="label"
            option-value="value"
            lazy-rules="ondemand"
            v-model="checkup.insuranceCompany"
            :dense="dense"
            :readonly="readonly"
            :hide-dropdown-icon="readonly"
            :options="insuranceCompanyOptions"
            :id="`${prefixId}-select-province`"
            :label="$t('formDialogInputInsuranceCompany')"
            @filter="insuranceCompanyFilter"
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  {{ $t('noResults') }}
                </q-item-section>
              </q-item>
            </template>
          </q-select>
          <VueDatePicker
            utc
            autoApply
            v-model="checkup.coverageStartDate"
            :teleport="true"
            :dark="$q.dark.isActive"
            :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
            :enableTimePicker="false"
            :disabled="readonly"
            class="col-md-3 col-6"
          >
            <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"
                :id="`${prefixId}-input-birth-date`"
                :label="$t('formDialogInputCoverageStartDate')"
                :dense="dense"
                outlined
                :readonly="readonly"
                placeholder="DD/MM/YYYY"
                :mask="readonly ? '' : '##/##/####'"
                :model-value="
                  checkup.coverageStartDate
                    ? readonly
                      ? dateFormat(checkup.coverageStartDate)
                      : dateFormat(
                          checkup.coverageStartDate,
                          false,
                          false,
                          true,
                        )
                    : undefined
                "
                @update:model-value="
                  (v) => {
                    if (v && v.toString().length === 10) {
                      checkup.coverageStartDate = parseAndFormatDate(v, locale);
                    }
                  }
                "
              >
                <template v-slot:prepend>
                  <q-icon
                    size="xs"
                    name="mdi-calendar-blank-outline"
                    class="cursor-pointer"
                    color="positive"
                  />
                </template>
                <template v-slot:append>
                  <q-icon
                    v-if="checkup.coverageStartDate && !readonly"
                    name="mdi-close-circle"
                    class="cursor-pointer app-text-muted"
                    size="sm"
                    @click.stop="checkup.coverageStartDate = undefined"
                  />
                </template>
              </q-input>
            </template>
          </VueDatePicker>
          <VueDatePicker
            utc
            autoApply
            v-model="checkup.coverageExpireDate"
            :teleport="true"
            :dark="$q.dark.isActive"
            :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
            :enableTimePicker="false"
            :disabled="readonly"
            class="col-md-3 col-6"
          >
            <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"
                id="input-birth-date"
                :label="$t('formDialogInputCoverageExpiretDate')"
                :dense="dense"
                outlined
                :readonly="readonly"
                placeholder="DD/MM/YYYY"
                :mask="readonly ? '' : '##/##/####'"
                :model-value="
                  checkup.coverageExpireDate
                    ? readonly
                      ? dateFormat(checkup.coverageExpireDate)
                      : dateFormat(
                          checkup.coverageExpireDate,
                          false,
                          false,
                          true,
                        )
                    : undefined
                "
                @update:model-value="
                  (v) => {
                    if (v && v.toString().length === 10) {
                      checkup.coverageExpireDate = parseAndFormatDate(
                        v,
                        locale,
                      );
                    }
                  }
                "
              >
                <template v-slot:prepend>
                  <q-icon
                    size="xs"
                    name="mdi-calendar-blank-outline"
                    class="cursor-pointer"
                    color="positive"
                  />
                </template>
                <template v-slot:append>
                  <q-icon
                    v-if="checkup.coverageExpireDate && !readonly"
                    name="mdi-close-circle"
                    class="cursor-pointer app-text-muted"
                    size="sm"
                    @click.stop="checkup.coverageExpireDate = undefined"
                  />
                </template>
              </q-input>
            </template>
          </VueDatePicker>
        </div>

        <q-separator
          v-if="separator"
          class="col-12 q-mt-xl q-mb-md"
          style="padding-block: 0.5px"
        />
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>

<style scoped>
.active-tab {
  color: var(--brand-1);
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  margin-bottom: -1.5px;
  border-bottom: 3px solid var(--surface-1);
}
</style>
