<template>
  <div class="commandPad chiefReservedCommand">
    <div class="commandTable">
      <DragSelect
        :style="rowGridStyle"
        attribute="turnIdx"
        @dragStart="isDragSingle = true"
        @dragDone="
  isDragSingle = false;
selectTurn(...$event);
        "
        v-slot="{ selected }"
      >
        <div
          v-for="(turnObj, turnIdx) in reservedCommandList"
          :key="turnIdx"
          :turnIdx="turnIdx"
          class="time_pad center f_tnum"
          :style="{
            backgroundColor: 'black',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            color:
              isDragSingle && selected.has(`${turnIdx}`) ? 'cyan' : undefined,
          }"
        >{{ turnObj.time }}</div>
      </DragSelect>
      <DragSelect
        :style="rowGridStyle"
        attribute="turnIdx"
        @dragStart="isDragToggle = true"
        @dragDone="
  isDragToggle = false;
toggleTurn(...$event);
        "
        v-slot="{ selected }"
      >
        <div
          v-for="(turnObj, turnIdx) in reservedCommandList"
          :key="turnIdx"
          :turnIdx="turnIdx"
          class="idx_pad center d-grid"
        >
          <b-button
            size="sm"
            :variant="
              isDragToggle && selected.has(`${turnIdx}`)
                ? 'light'
                : turnList.has(turnIdx)
                  ? 'info'
                  : turnList.size == 0 && prevTurnList.has(turnIdx)
                    ? 'success'
                    : 'primary'
            "
          >{{ turnIdx + 1 }}</b-button>
        </div>
      </DragSelect>
      <div :style="rowGridStyle">
        <div
          v-for="(turnObj, turnIdx) in reservedCommandList"
          :key="turnIdx"
          class="turn_pad center"
          @click="chooseCommand(turnObj.action)"
        >
          <span
            class="turn_text"
            :style="turnObj.style"
            v-b-tooltip.hover
            :title="turnObj.tooltip"
            v-html="turnObj.brief"
          ></span>
        </div>
      </div>
    </div>
    <div class="row gx-0">
      <div class="col-2 d-grid">
        <b-button
          :pressed="searchModeOn"
          @click="toggleSearchCommand()"
          :variant="searchModeOn ? 'info' : 'primary'"
          v-b-tooltip.hover
          title="검색 기능을 활성화합니다."
        >
          <i class="bi bi-search"></i>
        </b-button>
      </div>
      <div class="col-7">
        <v-multiselect
          v-model="selectedCommand"
          :allow-empty="false"
          :options="commandList"
          :group-select="false"
          group-values="values"
          group-label="category"
          label="searchText"
          track-by="value"
          open-direction="top"
          :show-labels="false"
          selectLabel="선택(엔터)"
          selectGroupLabel
          selectedLabel="선택됨"
          deselectLabel="해제(엔터)"
          deselectGroupLabel
          placeholder="턴 선택"
          :maxHeight="400"
          :searchable="searchModeOn"
        >
          <template v-slot:noResult>검색 결과가 없습니다.</template>
          <template v-slot:option="props">
            <!--FIXME: 카테고리-->
            <template v-if="props.option.title">
              <span class="compensatePositive" v-if="props.option.compensation > 0">▲</span>
              <span class="compensateNegative" v-else-if="props.option.compensation < 0">▼</span>
              <span class="compensateNeutral" v-else></span>
              <span
                :class="[props.option.possible ? '' : 'commandImpossible']"
              >{{ props.option.title }}</span>
            </template>
            <template v-else-if="props.option.category">{{ props.option.category }}</template>
          </template>
          <template v-slot:singleLabel="props">{{ props.option.simpleName }}</template>
        </v-multiselect>
      </div>
      <div class="col-3 d-grid">
        <b-button @click="reserveCommand()" variant="primary">실행</b-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import addMinutes from "date-fns/esm/addMinutes";
import { stringifyUrl } from "query-string";
import { defineProps, defineEmits, onMounted, ref, watch, type PropType } from "vue";
import { formatTime } from "@util/formatTime";
import { joinYearMonth } from "@util/joinYearMonth";
import { mb_strwidth } from "@util/mb_strwidth";
import { parseTime } from "@util/parseTime";
import { parseYearMonth } from "@util/parseYearMonth";
import { convertSearch초성 } from "@util/convertSearch초성";
import VueTypes from "vue-types";
import DragSelect from "@/components/DragSelect.vue";
import { isString } from "lodash";
import { SammoAPI } from "@/SammoAPI";
import type { ChiefResponse, CommandItem, TurnObj } from "@/defs";


type TurnObjWithTime = TurnObj & {
  time: string;
  year?: number;
  month?: number;
  tooltip?: string;
  style?: Record<string, unknown>;
};

const searchModeKey = `sammo_searchModeOn`;

const props = defineProps({
  maxTurn: VueTypes.integer.isRequired,
  maxPushTurn: VueTypes.integer.isRequired,
  date: VueTypes.string.isRequired,
  year: VueTypes.integer.isRequired,
  month: VueTypes.integer.isRequired,
  turnTerm: VueTypes.integer.isRequired,
  turnTime: VueTypes.string.isRequired,
  selectedTurn: {
    type: Object as PropType<Set<number>>,
    required: false,
    default: () => new Set(),
  },
  turn: {
    type: Array as PropType<TurnObj[]>,
    required: true,
  },
  commandList: {
    type: Object as PropType<ChiefResponse['commandList']>,
    required: true,
  },
})


const serverNowObj = ref(parseTime(props.date));
const clientNowObj = ref(new Date());
const timeDiff = ref(serverNowObj.value.getTime() - clientNowObj.value.getTime());

const listReqArgCommand = new Set<string>();
for (const commandCategories of props.commandList) {
  if (!commandCategories.values) {
    continue;
  }
  for (const commandObj of commandCategories.values) {
    if (!commandObj.reqArg) {
      continue;
    }
    listReqArgCommand.add(commandObj.value);
  }
}

const selectedCommand = ref(props.commandList[0].values[0]);
for (const subCategory of props.commandList) {
  for (const command of subCategory.values) {
    if (command.searchText) {
      continue;
    }
    command.searchText = convertSearch초성(command.simpleName).join("|");
  }
}

const invCommandMap: Record<string, CommandItem> = {};
for (const category of props.commandList) {
  for (const command of category.values) {
    invCommandMap[command.value] = command;
  }
}

const searchModeOn = ref((localStorage.getItem(searchModeKey) ?? "0") != "0");

const emptyTurn: TurnObjWithTime[] = Array.from<TurnObjWithTime>({
  length: props.maxTurn,
}).fill({
  arg: {},
  brief: "",
  action: "",
  year: undefined,
  month: undefined,
  time: "",
});

const prevTurnList = ref(new Set([0]));

const rowGridStyle = ref({
  display: "grid",
  gridTemplateRows: `repeat(${props.maxTurn}, 30px)`,
});

const updated = ref(false);
const isDragSingle = ref(false);
const isDragToggle = ref(false);
const reservedCommandList = ref(emptyTurn);
const turnList = ref(props.selectedTurn);
const autorun_limit = ref<number | null>(null);

const emit = defineEmits<{
  (event: 'raiseReload'): void,
  (event: 'update:selectedTurn', value: Set<number>): void,
}>();

function triggerUpdateCommandList(type?: string) {
  console.log("try update", type);
  updated.value = false;
  setTimeout(() => {
    updateCommandList();
  }, 1);
}
function toggleTurn(...reqTurnList: number[] | string[]) {
  for (let turnIdx of reqTurnList) {
    if (isString(turnIdx)) {
      turnIdx = parseInt(turnIdx);
    }
    if (turnList.value.has(turnIdx)) {
      turnList.value.delete(turnIdx);
    } else {
      turnList.value.add(turnIdx);
    }
  }
  emit("update:selectedTurn", turnList.value);
}

function selectTurn(...reqTurnList: number[] | string[]) {
  turnList.value.clear();
  for (const turnIdx of reqTurnList) {
    if (isString(turnIdx)) {
      turnList.value.add(parseInt(turnIdx));
    } else {
      turnList.value.add(turnIdx);
    }
  }
  emit("update:selectedTurn", turnList.value);
}

function updateCommandList() {
  if (updated.value) {
    return;
  }
  console.log("do update!");
  const _reservedCommandList: TurnObjWithTime[] = [];
  let yearMonth = joinYearMonth(props.year, props.month);

  const turnTime = parseTime(props.turnTime);
  let nextTurnTime = new Date(turnTime);

  const autorunLimitYearMonth = autorun_limit.value ?? yearMonth - 1;
  const [autorunLimitYear, autorunLimitMonth] = parseYearMonth(
    autorunLimitYearMonth
  );

  for (const obj of props.turn) {
    const [year, month] = parseYearMonth(yearMonth);
    let tooltip: string[] = [];
    let style: Record<string, unknown> = {};

    const brief = obj.brief;

    if (yearMonth <= autorunLimitYearMonth) {
      if (obj.brief == "휴식") {
        obj.brief = "휴식<small>(자율 행동)</small>";
      }
      style.color = "#aaffff";

      tooltip.push(
        `자율 행동 기간: ${autorunLimitYear}년 ${autorunLimitMonth}월까지`
      );
    }

    if (mb_strwidth(brief) > 22) {
      tooltip.push(brief);
    }

    _reservedCommandList.push({
      ...obj,
      year,
      month,
      time: formatTime(
        nextTurnTime,
        props.turnTerm >= 5 ? "HH:mm" : "mm:ss"
      ),
      tooltip: tooltip.length == 0 ? undefined : tooltip.join("\n"),
      style,
    });

    yearMonth += 1;
    nextTurnTime = addMinutes(nextTurnTime, props.turnTerm);
  }
  reservedCommandList.value = _reservedCommandList;

  const serverNowObj = parseTime(props.date);
  const clientNowObj = new Date();
  timeDiff.value = serverNowObj.getTime() - clientNowObj.getTime();
  updated.value = true;
}

async function reserveCommand() {
  let reqTurnList: number[];
  if (turnList.value.size == 0) {
    reqTurnList = Array.from(prevTurnList.value.values());
  } else {
    reqTurnList = Array.from(turnList.value.values());
  }

  if (reqTurnList.length == 0) {
    reqTurnList.push(0);
  }

  const commandName = selectedCommand.value.value;

  if (listReqArgCommand.has(commandName)) {
    document.location.href = stringifyUrl({
      url: "v_processing.php",
      query: {
        command: commandName,
        turnList: reqTurnList.join("_"),
        is_chief: true,
      },
    });
    return;
  }

  try {
    await SammoAPI.NationCommand.ReserveCommand({
      turnList: reqTurnList,
      action: commandName,
    });

    if (turnList.value.size > 0) {
      prevTurnList.value.clear();
      for (const v of reqTurnList) {
        prevTurnList.value.add(v);
      }
      turnList.value.clear();
    }
  } catch (e) {
    console.error(e);
    alert(`실패했습니다: ${e}`);
    return;
  }
  emit("raiseReload");
}
function toggleSearchCommand() {
  searchModeOn.value = !searchModeOn.value;
  localStorage.setItem(searchModeKey, searchModeOn.value ? "1" : "0");
}

function chooseCommand(val: string) {
  selectedCommand.value = invCommandMap[val];
}


watch(() => props.date, () => {
  triggerUpdateCommandList("date");
})
watch(() => props.year, () => {
  triggerUpdateCommandList("year");
})
watch(() => props.month, () => {
  triggerUpdateCommandList("month");
})
watch(() => props.turnTime, () => {
  triggerUpdateCommandList("turnTime");
})
watch(() => props.commandList, () => {
  triggerUpdateCommandList("commandList");
})
watch(() => props.selectedTurn, (val: Set<number>) => {
  console.log(val);
  if (val === turnList.value) {
    console.log("pass!");
    return;
  }
  turnList.value.clear();
  for (const t of val.values()) {
    turnList.value.add(t);
  }
})

watch(turnList, () => {
  console.log(turnList.value);
  emit("update:selectedTurn", turnList.value);
})


onMounted(() => {
  updateCommandList();
})

</script>
<style lang="scss">
@import "@scss/common/break_500px.scss";
@import "@scss/common/variables.scss";
@import "@scss/common/bootswatch_custom_variables.scss";

.chiefReservedCommand {
  background-color: $gray-900;

  .commandTable {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(39.67px, 1fr) minmax(28px, 1fr) 5fr;
    //30, 70, 37.65, 160
  }

  @include media-1000px {
    .turn_pad {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .multiselect__content-wrapper {
      margin-left: calc(-100% / 7 * 2);
      width: calc(100% / 7 * 12);
    }

    .multiselect__single {
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  @include media-500px {
    .dropdown-item {
      padding: 8px;
    }

    .multiselect__content-wrapper {
      margin-left: calc(-100% / 7 * 2);
      width: calc(100% / 7 * 12);
    }

    .commandPad {
      margin-top: 10px;
      margin-bottom: 10px;

      .btn {
        transition: none !important;
      }
    }

    .month_pad,
    .time_pad,
    .turn_pad {
      padding: 6px;
    }
  }

  .month_pad:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .month_pad,
  .time_pad,
  .turn_pad {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .turn_pad {
    white-space: nowrap;
  }

  .turn_pad .turn_text {
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>