<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { QTableColumn } from 'quasar';
import { EmployeeHistory, NewEmployeeHistory } from 'stores/employee/types';
import { dateFormat } from 'src/utils/datetime';
import NoData from '../NoData.vue';
import { computed, onMounted, ref, watch } from 'vue';
import useOptionStore from 'stores/options';

const { t } = useI18n();
const optionStore = useOptionStore();

const historyList = defineModel<EmployeeHistory[]>('historyList', {
  required: true,
});

const columns: QTableColumn[] = [
  {
    name: 'updatedAt',
    label: t('time'),
    field: 'updatedAt',
    align: 'left',
    headerStyle: 'font-weight: bold',
  },
  {
    name: 'updatedBy',
    align: 'center',
    label: t('editBy'),
    field: 'updatedBy',
    headerStyle: 'font-weight: bold',
  },

  {
    name: 'history',
    align: 'center',
    label: '',
    field: 'history',
  },
  {
    name: 'valueAfter',
    align: 'center',
    label: t('valueAfter'),
    field: 'valueAfter',
    headerStyle: 'font-weight: bold',
  },
  {
    name: 'valueBefore',
    align: 'center',
    label: t('valueBefore'),
    field: 'valueBefore',
    headerStyle: 'font-weight: bold',
  },
];

const currentDate = ref();
const currentData = ref();
const currentIndex = ref(0);
const isHistoryData = ref(false);
const formatList = ref<NewEmployeeHistory[]>([]);

const fieldName = [
  {
    name: 'customerBranchId',
    title: 'formDialogTitleInformation',
    i18n: 'formDialogEmployerID',
  },
  {
    name: 'nrcNo',
    title: 'formDialogTitleInformation',
    i18n: 'customerEmployee.form.nrcNo',
  },

  {
    name: 'firstName',
    title: 'personalInfo',
    i18n: 'form.firstName',
  },
  {
    name: 'firstNameEN',
    title: 'personalInfo',
    i18n: 'form.firstNameEN',
  },
  { name: 'lastName', title: 'personalInfo', i18n: 'formDialogInputLastName' },
  {
    name: 'lastNameEN',
    title: 'personalInfo',
    i18n: 'form.lastNameEN',
  },
  {
    name: 'dateOfBirth',
    title: 'personalInfo',
    i18n: 'form.birthDate',
  },
  { name: 'gender', title: 'personalInfo', i18n: 'formDialogInputGender' },
  {
    name: 'nationality',
    title: 'personalInfo',
    i18n: 'general.nationality',
  },

  {
    name: 'address',
    title: 'formDialogTitlePersonnelAddress',
    i18n: 'formDialogTitleAddressPure',
  },
  {
    name: 'addressEN',
    title: 'formDialogTitlePersonnelAddress',
    i18n: 'formDialogTitleAddressPureEN',
  },
  {
    name: 'provinceId',
    title: 'formDialogTitlePersonnelAddress',
    i18n: 'province',
  },
  {
    name: 'districtId',
    title: 'formDialogTitlePersonnelAddress',
    i18n: 'district',
  },
  {
    name: 'subDistrictId',
    title: 'formDialogTitlePersonnelAddress',
    i18n: 'subDistrict',
  },

  {
    name: 'passportType',
    title: 'formDialogTitlePassport',
    i18n: 'formDialogInputPassportType',
  },
  {
    name: 'passportNumber',
    title: 'formDialogTitlePassport',
    i18n: 'formDialogInputPassportNo',
  },
  {
    name: 'previousPassportReference',
    title: 'formDialogTitlePassport',
    i18n: 'formDialogInputPassportRef',
  },
  {
    name: 'passportIssuingPlace',
    title: 'formDialogTitlePassport',
    i18n: 'formDialogInputWPassportPlace',
  },
  {
    name: 'passportIssuingCountry',
    title: 'formDialogTitlePassport',
    i18n: 'formDialogInputPassportCountry',
  },
  {
    name: 'passportIssueDate',
    title: 'formDialogTitlePassport',
    i18n: 'formDialogInputPassportIssuance',
  },
  {
    name: 'passportExpiryDate',
    title: 'formDialogTitlePassport',
    i18n: 'formDialogInputPassportExpire',
  },

  {
    name: 'visaType',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaType',
  },
  {
    name: 'visaNumber',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaNo',
  },
  {
    name: 'visaIssueDate',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaIssuance',
  },
  {
    name: 'visaExpiryDate',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaExpire',
  },
  {
    name: 'visaIssuingPlace',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaPlace',
  },
  {
    name: 'visaStayUntilDate',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaStayUntil',
  },
  {
    name: 'tm6Number',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaTM6',
  },
  {
    name: 'entryDate',
    title: 'formDialogTitleVisa',
    i18n: 'formDialogInputVisaEnter',
  },
];

function nextDate(pre: boolean = false) {
  const date = new Date(currentDate.value);
  pre ? date.setDate(date.getDate() - 1) : date.setDate(date.getDate() + 1);
  const dateKey = formatDate(date.toString());
  currentDate.value = dateKey;
}

function formatDate(date: string) {
  const updatedAt = new Date(date);
  const dateKey = `${updatedAt.getFullYear()}-${updatedAt.getMonth() + 1}-${updatedAt.getDate()}`;
  return dateKey;
}

function isValidDate(dateString: string): boolean {
  if (typeof dateString !== 'string' || dateString.length < 24) {
    return false;
  }

  const date = new Date(dateString);

  return !isNaN(date.getTime()) && dateString === date.toISOString();
}

function mapName(field: string): { title: string; i18n: string } {
  const fieldData = fieldName.find((item) => item.name === field);
  if (fieldData) {
    return { title: fieldData.title, i18n: fieldData.i18n };
  }
  return { title: '-', i18n: '-' };
}

async function groupEmployeeHistory(
  historyList: EmployeeHistory[],
): Promise<NewEmployeeHistory[]> {
  const grouped = historyList.reduce((acc, curr) => {
    const updatedAt = new Date(curr.updatedAt);
    const dateKey = `${updatedAt.getFullYear()}-${updatedAt.getMonth() + 1}-${updatedAt.getDate()}`;

    const existingEntry = acc.find((entry) => entry.date === dateKey);

    if (existingEntry) {
      const existingData = existingEntry.data.find(
        (data) => data.updatedAt.getTime() === updatedAt.getTime(),
      );

      if (existingData) {
        existingData.history.push({
          valueAfter: curr.valueAfter,
          valueBefore: curr.valueBefore,
          field: curr.field,
        });
      } else {
        existingEntry.data.push({
          masterId: curr.masterId,
          updatedBy: curr.updatedBy,
          updatedByUserId: curr.updatedByUserId,
          updatedAt: updatedAt,
          id: curr.id,
          history: [
            {
              valueAfter: curr.valueAfter,
              valueBefore: curr.valueBefore,
              field: curr.field,
            },
          ],
        });
      }
    } else {
      acc.push({
        date: dateKey,
        data: [
          {
            masterId: curr.masterId,
            updatedBy: curr.updatedBy,
            updatedByUserId: curr.updatedByUserId,
            updatedAt: updatedAt,
            id: curr.id,
            history: [
              {
                valueAfter: curr.valueAfter,
                valueBefore: curr.valueBefore,
                field: curr.field,
              },
            ],
          },
        ],
      });
    }

    return acc;
  }, [] as NewEmployeeHistory[]);

  return grouped;
}

onMounted(async () => {
  const newList = await groupEmployeeHistory(historyList.value);
  formatList.value = newList;

  currentDate.value = formatList.value[currentIndex.value].date;
  currentData.value = formatList.value[currentIndex.value].data;
});

watch(
  () => currentDate.value,
  (i) => {
    const dateKey = formatDate(i);
    isHistoryData.value = formatList.value.some(
      (item) => item.date === dateKey,
    );
  },
);
</script>

<template>
  <div class="col-12">
    <div
      class="row full-width justify-center q-py-sm header-border"
      style="background: hsla(var(--info-bg) / 0.1)"
    >
      <div class="surface-1 q-py-sm q-px-sm row items-center no-wrap">
        <q-btn
          flat
          color="info"
          padding="0"
          icon="mdi-chevron-left"
          @click="nextDate(true)"
        />
        <VueDatePicker
          :dark="$q.dark.isActive"
          id="input-birth-date"
          for="input-birth-date"
          class="date-picker"
          utc
          autoApply
          :teleport="true"
          v-model="currentDate"
          :locale="$i18n.locale === 'tha' ? 'th' : 'en'"
          :enableTimePicker="false"
        >
          <template #year="{ value }">
            {{ $i18n.locale === 'tha' ? value + 543 : value }}
          </template>
          <template #year-overlay-value="{ value }">
            {{ $i18n.locale === 'tha' ? value + 543 : value }}
          </template>
          <template #trigger>
            <span class="text-weight-medium q-px-xl">
              {{ dateFormat(currentDate) }}
            </span>
          </template>
        </VueDatePicker>
        <q-btn
          flat
          color="info"
          padding="0"
          icon="mdi-chevron-right"
          @click="nextDate()"
        />
      </div>
    </div>

    <div v-if="isHistoryData && currentData?.length > 0">
      <q-table
        flat
        class="table-border"
        table-header-class="surface-2"
        :rows="currentData"
        :columns="columns"
        row-key="name"
      >
        <template v-slot:body="props">
          <q-tr
            :props="props"
            :style="`background-color: ${props.rowIndex % 2 === 0 ? '' : 'var(--surface-2)'}`"
          >
            <q-td key="updatedAt" :props="props">
              {{ dateFormat(props.row.updatedAt, false, true, true) }}
            </q-td>

            <q-td key="updatedBy" :props="props">
              <div class="row items-center no-wrap">
                <q-avatar class="surface-tab">
                  <img
                    v-if="false"
                    src="https://cdn.quasar.dev/img/avatar.png"
                  />
                  <q-icon v-else name="mdi-account"></q-icon>
                </q-avatar>
                <div class="column q-pl-md items-start">
                  <span class="text-weight-bold">
                    {{
                      $i18n.locale === 'eng'
                        ? `${props.row.updatedBy.firstNameEN} ${props.row.updatedBy.lastNameEN}`
                        : (`${props.row.updatedBy.firstName} ${props.row.updatedBy.lastName}` ??
                          '-')
                    }}
                  </span>
                  <!-- <span class="text-caption">นักบริหาร</span> -->
                </div>
              </div>
            </q-td>

            <q-td key="history" :props="props">
              <q-stepper vertical flat>
                <q-step
                  v-for="(item, index) in props.row.history"
                  :key="index"
                  :name="1"
                  :title="$t(mapName(item.field).title)"
                  :caption="$t(mapName(item.field).i18n)"
                  :icon="`mdi-numeric-${props.row.history.length - index}`"
                ></q-step>
              </q-stepper>
            </q-td>

            <q-td key="valueBefore" :props="props">
              <div
                v-for="(i, index) in props.row.history"
                :key="index"
                class="q-py-md"
              >
                {{
                  isValidDate(i.valueBefore) === true
                    ? dateFormat(i.valueBefore)
                    : optionStore.mapOption(i.valueBefore)
                }}
              </div>
            </q-td>

            <q-td key="valueAfter" :props="props">
              <div
                v-for="(i, index) in props.row.history"
                :key="index"
                class="q-py-md"
              >
                {{
                  isValidDate(i.valueAfter) === true
                    ? dateFormat(i.valueAfter)
                    : optionStore.mapOption(i.valueAfter)
                }}
              </div>
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </div>

    <div v-else class="table-border flex items-center justify-center q-py-lg">
      <NoData />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header-border {
  border: 1px solid var(--border-color);
  border-top-left-radius: var(--radius-2);
  border-top-right-radius: var(--radius-2);
}

.table-border {
  border-bottom: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);

  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: var(--radius-2);
  border-bottom-right-radius: var(--radius-2);
}

:deep(.q-stepper.q-stepper--vertical.q-stepper--flat) {
  background-color: transparent;
  padding: 0;
  text-align: left;
}

:deep(.q-stepper__caption) {
  color: hsl(var(--text-mute-2)) !important;
}

:deep(.q-stepper__title) {
  color: hsl(var(--info-bg)) !important;
}

:deep(i.q-icon.mdi) {
  font-size: 18px !important;
}

:deep(.q-stepper__dot.row.flex-center.q-stepper__line.relative-position) {
  color: hsl(var(--info-bg)) !important;
}

.date-picker {
  cursor: pointer;
  font-family: 'Noto Sans Thai', sans-serif;
}
</style>
