<template>
  <div>연감</div>
  <div v-if="history">
    있음
    <div v-for="date of generateYearMonthList()" :key="date.yearMonth" @click="queryYearMonth = date.yearMonth">
      {{ date.year }}년 {{ date.month }}월 {{ date.queried ? `선택` : "" }} {{ date.current ? "현재" : "" }}
    </div>
    <div>
      <pre v-for="(item, idx) in history.global_action" :key="idx">{{item}}</pre>
    </div>
    <div>
      <pre v-for="(item, idx) in history.global_history" :key="idx">{{item}}</pre>
    </div>
  </div>
</template>

<script lang="ts">
declare const staticValues: {
  fisrtYearMonth: number;
  lastYearMonth: number;
  currentYearMonth: number;
  serverNick: string;
  serverID: string;
};
declare const query: {
  yearMonth: number | null;
  serverID: string;
};
</script>
<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import type { HistoryObj } from "./defs/API/Global";
import { SammoAPI } from "./SammoAPI";
import { joinYearMonth } from "./util/joinYearMonth";
import { parseYearMonth } from "./util/parseYearMonth";

const queryYearMonth = ref<number>();
const queryServerID = query.serverID;

const lastYearMonth = ref(staticValues.lastYearMonth);
const firstYearMonth = ref(staticValues.fisrtYearMonth);
const currentYearMonth = ref(staticValues.currentYearMonth);

const history = ref<HistoryObj>();

function* generateYearMonthList(): Generator<{
  year: number;
  month: number;
  yearMonth: number;
  current?: true;
  queried: boolean;
}> {
  let yearMonth = firstYearMonth.value;
  while (yearMonth <= lastYearMonth.value) {
    const [year, month] = parseYearMonth(yearMonth);
    yield {
      year,
      month,
      yearMonth,
      queried: queryYearMonth.value === yearMonth,
    };
    yearMonth++;
  }
  const [year, month] = parseYearMonth(yearMonth);
  yield {
    year,
    month,
    yearMonth,
    current: true,
    queried: queryYearMonth.value === yearMonth,
  };
}

watch(queryYearMonth, async (yearMonth) => {
  if (yearMonth === undefined) {
    return;
  }

  if (yearMonth > lastYearMonth.value) {
    try {
      const result = await SammoAPI.Global.GetCurrentHistory();
      history.value = result.data;
      console.log(result);
      const newLastYearMonth = joinYearMonth(result.data.year, result.data.month) - 1;
      if (newLastYearMonth > lastYearMonth.value) {
        lastYearMonth.value = newLastYearMonth;
        currentYearMonth.value = newLastYearMonth + 1;
      }
    } catch (e) {
      console.error(e);
      return;
    }
    return;
  }

  const [year, month] = parseYearMonth(yearMonth);
  try {
    const result = await SammoAPI.Global.GetHistory[queryServerID][year][month]();
    history.value = result.data;
    console.log(result);
  } catch (e) {
    console.error(e);
    return;
  }
});

onMounted(() => {
  queryYearMonth.value = (() => {
    if (query.yearMonth === null) {
      return staticValues.currentYearMonth;
    }
    if (query.yearMonth > staticValues.lastYearMonth + 1) {
      return staticValues.currentYearMonth;
    }
    if (query.yearMonth < staticValues.fisrtYearMonth) {
      return staticValues.currentYearMonth;
    }
    return query.yearMonth;
  })();
});
</script>
