<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import { EmployeeWorkCreate } from 'src/stores/employee/types';
import { useI18n } from 'vue-i18n';
import { checkTabBeforeAdd, selectFilterOptionRefMod } from 'src/stores/utils';

const { locale } = useI18n();

const employeeWork = defineModel<EmployeeWorkCreate[]>('employeeWork');
const positionNameOption = defineModel<{ label: string; value: string }[]>(
  'positionNameOption',
  { required: true },
);
const jobTypeOption = defineModel<{ label: string; value: string }[]>(
  'jobTypeOption',
  { required: true },
);
const workplaceOption = defineModel<{ label: string; value: string }[]>(
  'workplaceOption',
  { required: true },
);

const tab = ref();

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

function addData() {
  const canAdd = checkTabBeforeAdd(employeeWork.value || []);
  if (canAdd) {
    employeeWork.value?.push({
      workEndDate: null,
      workPermitExpireDate: null,
      workPermitIssuDate: null,
      workPermitNo: '',
      workplace: '',
      jobType: '',
      positionName: '',
      ownerName: '',
      remark: '',
    });
    if (employeeWork.value) tab.value = `tab${employeeWork.value.length - 1}`;
  }
}

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

  employeeWork.value.splice(index, 1);

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

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

const positionNameOptions = ref<Record<string, unknown>[]>([]);
const positionNameFilter = selectFilterOptionRefMod(
  positionNameOption,
  positionNameOptions,
  'label',
);

const jobTypeOptions = ref<Record<string, unknown>[]>([]);
const jobTypeFilter = selectFilterOptionRefMod(
  jobTypeOption,
  jobTypeOptions,
  'label',
);

const workplaceOptions = ref<Record<string, unknown>[]>([]);
const workplaceFilter = selectFilterOptionRefMod(
  workplaceOption,
  workplaceOptions,
  '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 || !checkTabBeforeAdd(employeeWork || [])"
        :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 employeeWork"
          v-bind:key="index"
          :name="`tab${index}`"
          class="content-tab text-capitalize"
        >
          <div class="text-weight-medium row items-center no-wrap">
            {{ $t('formDialogTabWork') + (index + 1) }}
            <q-btn
              v-if="!readonly && employeeWork?.length !== 1"
              round
              flat
              :id="`${prefixId}-close-dialog`"
              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">
      <q-tab-panel
        v-for="(work, index) in employeeWork"
        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">
          • {{ $t(`workHistory`) }}
        </div>
        <div class="col-md-9 col-12 row q-col-gutter-md">
          <q-input
            lazy-rules="ondemand"
            :for="`${prefixId}-input-owner-name`"
            :dense="dense"
            outlined
            :readonly="readonly"
            hide-bottom-space
            class="col-6"
            :label="$t('formDialogInputOwnerName')"
            v-model="work.ownerName"
          />
          <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="work.positionName"
            :dense="dense"
            :readonly="readonly"
            :options="positionNameOptions"
            :hide-dropdown-icon="readonly"
            :for="`${prefixId}-select-position-name`"
            :label="$t('formDialogInputJobPosition')"
            @filter="positionNameFilter"
          >
            <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="work.jobType"
            :dense="dense"
            :readonly="readonly"
            :options="jobTypeOptions"
            :hide-dropdown-icon="readonly"
            :for="`${prefixId}-select-job-type`"
            :label="$t('formDialogInputJobType')"
            @filter="jobTypeFilter"
          >
            <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"
            lazy-rules="ondemand"
            option-label="label"
            option-value="value"
            v-model="work.workplace"
            :dense="dense"
            :readonly="readonly"
            :options="workplaceOptions"
            :hide-dropdown-icon="readonly"
            :for="`${prefixId}-select-province`"
            :label="$t('formDialogInputWorkPlace')"
            @filter="workplaceFilter"
          >
            <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="`${prefixId}-input-work-end-date`"
            :label="$t('formDialogInputRemark')"
            :dense="dense"
            outlined
            :readonly="readonly"
            hide-bottom-space
            class="col-12"
            v-model="work.remark"
            type="textarea"
          />
          <VueDatePicker
            :id="`${prefixId}-date-picker-work-end-date`"
            utc
            autoApply
            v-model="work.workEndDate"
            :teleport="true"
            :dark="$q.dark.isActive"
            :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
            :enableTimePicker="false"
            :disabled="readonly"
            class="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('formDialogInputWorkUntil')"
                :dense="dense"
                outlined
                :readonly="readonly"
                placeholder="DD/MM/YYYY"
                :mask="readonly ? '' : '##/##/####'"
                :model-value="
                  work.workEndDate
                    ? readonly
                      ? dateFormat(work.workEndDate)
                      : dateFormat(work.workEndDate, false, false, true)
                    : undefined
                "
                @update:model-value="
                  (v) => {
                    if (v && v.toString().length === 10) {
                      work.workEndDate = 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="work.workEndDate && !readonly"
                    name="mdi-close-circle"
                    class="cursor-pointer app-text-muted"
                    size="sm"
                    @click.stop="work.workEndDate = undefined"
                  />
                </template>
              </q-input>
            </template>
          </VueDatePicker>
          <q-input
            lazy-rules="ondemand"
            :for="`${prefixId}-input-work-permit-no`"
            :dense="dense"
            outlined
            :readonly="readonly"
            hide-bottom-space
            class="col-6"
            :label="$t('formDialogInputWorkPermitNo')"
            v-model="work.workPermitNo"
          />
          <VueDatePicker
            :id="`${prefixId}-date-picker-work-permit-issu-date`"
            utc
            autoApply
            v-model="work.workPermitIssuDate"
            :teleport="true"
            :dark="$q.dark.isActive"
            :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
            :enableTimePicker="false"
            :disabled="readonly"
            class="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('formDialogInputWorkPermitIssueDate')"
                :dense="dense"
                outlined
                :readonly="readonly"
                placeholder="DD/MM/YYYY"
                :mask="readonly ? '' : '##/##/####'"
                :model-value="
                  work.workPermitIssuDate
                    ? readonly
                      ? dateFormat(work.workPermitIssuDate)
                      : dateFormat(work.workPermitIssuDate, false, false, true)
                    : undefined
                "
                @update:model-value="
                  (v) => {
                    if (v && v.toString().length === 10) {
                      work.workPermitIssuDate = 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="work.workPermitIssuDate && !readonly"
                    name="mdi-close-circle"
                    class="cursor-pointer app-text-muted"
                    size="sm"
                    @click.stop="work.workPermitIssuDate = undefined"
                  />
                </template>
              </q-input>
            </template>
          </VueDatePicker>
          <VueDatePicker
            :id="`${prefixId}-date-picker-work-permit-expire-date`"
            utc
            autoApply
            v-model="work.workPermitExpireDate"
            :teleport="true"
            :dark="$q.dark.isActive"
            :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
            :enableTimePicker="false"
            :disabled="readonly"
            class="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('formDialogInputWorkPermitExpireDate')"
                :dense="dense"
                outlined
                :readonly="readonly"
                placeholder="DD/MM/YYYY"
                :mask="readonly ? '' : '##/##/####'"
                :model-value="
                  work.workPermitExpireDate
                    ? readonly
                      ? dateFormat(work.workPermitExpireDate)
                      : dateFormat(
                          work.workPermitExpireDate,
                          false,
                          false,
                          true,
                        )
                    : undefined
                "
                @update:model-value="
                  (v) => {
                    if (v && v.toString().length === 10) {
                      work.workPermitExpireDate = 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="work.workPermitExpireDate && !readonly"
                    name="mdi-close-circle"
                    class="cursor-pointer app-text-muted"
                    size="sm"
                    @click.stop="work.workPermitExpireDate = 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>
