<template>
  <div class="commandPad">
    <div class="col alert alert-dark m-0 p-1 center">
      <h4 class="m-0">명령 목록</h4>
    </div>
    <div class="row gx-1">
      <div class="col d-grid">
        <BButton variant="secondary" @click="isEditMode = !isEditMode">
          {{ isEditMode ? "일반 모드로" : "고급 모드로" }}
        </BButton>
      </div>
      <div
        class="col alert alert-primary m-0 p-0"
        style="text-align: center; display: flex; justify-content: center; align-items: center"
      >
        <SimpleClock :serverTime="serverNow" />
      </div>
      <div class="col d-grid">
        <BDropdown right text="반복">
          <BDropdownItem v-for="turnIdx in maxPushTurn" :key="turnIdx" @click="repeatGeneralCommand(turnIdx)">
            {{ turnIdx }}턴
          </BDropdownItem>
        </BDropdown>
      </div>
    </div>

    <div v-if="isEditMode" class="row gx-1">
      <div class="col-4 d-grid">
        <BDropdown left text="범위">
          <BDropdownItem @click="queryActionHelper.selectTurn()"> 해제 </BDropdownItem>
          <BDropdownItem @click="queryActionHelper.selectAll()"> 모든턴 </BDropdownItem>
          <BDropdownItem @click="queryActionHelper.selectStep(0, 2)"> 홀수턴 </BDropdownItem>
          <BDropdownItem @click="queryActionHelper.selectStep(1, 2)"> 짝수턴 </BDropdownItem>
          <BDropdownDivider />

          <BDropdownText v-for="spanIdx in [3, 4, 5, 6, 7]" :key="spanIdx">
            {{ spanIdx }}턴 간격
            <br />
            <BButtonGroup>
              <BButton
                v-for="beginIdx in spanIdx"
                :key="beginIdx"
                class="ignoreMe"
                @click="queryActionHelper.selectStep(beginIdx - 1, spanIdx)"
              >
                {{ beginIdx }}
              </BButton>
            </BButtonGroup>
          </BDropdownText>
        </BDropdown>
      </div>

      <div class="col-4 d-grid">
        <BDropdown left text="보관함">
          <BDropdownItem
            v-for="[actionKey, actions] of storedActions"
            :key="actionKey"
            @click.self="useStoredAction(actions)"
          >
            {{ actionKey }}
            <BButton size="sm" @click.prevent="deleteStoredActions(actionKey)"> 삭제 </BButton>
          </BDropdownItem>
        </BDropdown>
      </div>

      <div class="col-4 d-grid">
        <BDropdown right text="최근 실행">
          <BDropdownItem
            v-for="(action, idx) of Array.from(recentActions.values()).reverse()"
            :key="idx"
            @click="void reserveCommandDirect([[queryActionHelper.getSelectedTurnList(), action]])"
          >
            {{ action.brief }}
          </BDropdownItem>
        </BDropdown>
      </div>

      <div class="col-5 d-grid">
        <BDropdown left variant="light" :style="{ color: 'black' }" text="선택한 턴을">
          <BDropdownItem @click="clipboardCut"> <i class="bi bi-scissors" />&nbsp;잘라내기 </BDropdownItem>
          <BDropdownItem @click="clipboardCopy"> <i class="bi bi-files" />&nbsp;복사하기 </BDropdownItem>
          <BDropdownItem @click="clipboardPaste"> <i class="bi bi-clipboard-fill" />&nbsp;붙여넣기 </BDropdownItem>
          <BDropdownDivider />
          <BDropdownItem @click="setStoredActions">
            <i class="bi bi-bookmark-plus-fill" />&nbsp;보관하기
          </BDropdownItem>
          <BDropdownItem @click="subRepeatCommand"> <i class="bi bi-arrow-repeat" />&nbsp;반복하기 </BDropdownItem>
          <BDropdownDivider />
          <BDropdownItem @click="eraseSelectedTurnList"> <i class="bi bi-eraser" />&nbsp;비우기 </BDropdownItem>
          <BDropdownItem @click="eraseAndPullCommand">
            <i class="bi bi-arrow-bar-up" />&nbsp;지우고 당기기
          </BDropdownItem>
          <BDropdownItem @click="pushEmptyCommand"> <i class="bi bi-arrow-bar-down" />&nbsp;뒤로 밀기 </BDropdownItem>
          <!-- 최근에 실행한 10턴 -->
        </BDropdown>
      </div>

      <div class="col-7 d-grid">
        <BButton variant="info" @click="toggleForm($event)"> 명령 선택 ▾ </BButton>
      </div>
    </div>
    <CommandSelectForm
      ref="commandSelectForm"
      v-model:activatedCategory="activatedCategory"
      :commandList="commandList"
      @onClose="chooseCommand($event)"
    />

    <div :style="{ position: 'relative' }">
      <div
        class="bg-dark"
        :style="{
          position: 'absolute',
          top: `${basicModeRowHeight * currentQuickReserveTarget + 30}px`,
          width: '100%',
          zIndex: 9,
        }"
      >
        <CommandSelectForm
          ref="commandQuickReserveForm"
          v-model:activatedCategory="activatedCategory"
          :commandList="commandList"
          :hideClose="false"
          @onClose="chooseQuickReserveCommand($event)"
        />
      </div>
    </div>
    <div
      :class="{
        commandTable: true,
        isEditMode,
      }"
    >
      <DragSelect
        v-slot="{ selected }"
        :style="rowGridStyle"
        :disabled="!isEditMode"
        attribute="turnIdx"
        @dragStart="isDragToggle = true"
        @dragDone="
          isDragToggle = false;
          queryActionHelper.toggleTurn(...$event);
        "
      >
        <div
          v-for="(turnObj, turnIdx) in reservedCommandList.slice(0, viewMaxTurn)"
          :key="turnIdx"
          :turnIdx="turnIdx"
          class="idx_pad center d-grid"
        >
          <BButton
            v-if="isEditMode"
            size="sm"
            :variant="
              isDragToggle && selected.has(`${turnIdx}`)
                ? 'light'
                : selectedTurnList.has(turnIdx)
                ? 'info'
                : selectedTurnList.size == 0 && prevSelectedTurnList.has(turnIdx)
                ? 'success'
                : 'primary'
            "
          >
            {{ turnIdx + 1 }}
          </BButton>
          <div v-else class="plain-center">
            {{ turnIdx + 1 }}
          </div>
        </div>
      </DragSelect>
      <DragSelect
        v-slot="{ selected }"
        :style="rowGridStyle"
        attribute="turnIdx"
        :disabled="!isEditMode"
        @dragStart="isDragSingle = true"
        @dragDone="
          isDragSingle = false;
          queryActionHelper.selectTurn(...$event);
        "
      >
        <div
          v-for="(turnObj, turnIdx) in reservedCommandList.slice(0, viewMaxTurn)"
          :key="turnIdx"
          height="24"
          class="month_pad center"
          :turnIdx="turnIdx"
          :style="{
            'white-space': 'nowrap',
            'font-size': `${Math.min(14, (75 / (`${turnObj.year ?? 1}`.length + 8)) * 1.8)}px`,
            overflow: 'hidden',
            color: isDragSingle && selected.has(`${turnIdx}`) ? 'cyan' : undefined,
          }"
        >
          {{ turnObj.year ? `${turnObj.year}年` : "" }}
          {{ turnObj.month ? `${turnObj.month}月` : "" }}
        </div>
      </DragSelect>
      <div :style="rowGridStyle">
        <div
          v-for="(turnObj, turnIdx) in reservedCommandList.slice(0, viewMaxTurn)"
          :key="turnIdx"
          class="time_pad center"
          :style="{
            backgroundColor: 'black',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
          }"
        >
          {{ turnObj.time }}
        </div>
      </div>
      <div :style="rowGridStyle">
        <div
          v-for="(turnObj, turnIdx) in reservedCommandList.slice(0, viewMaxTurn)"
          :key="turnIdx"
          class="turn_pad center"
        >
          <span v-b-tooltip.hover class="turn_text" :style="turnObj.style" :title="turnObj.tooltip">
            <!-- eslint-disable-next-line vue/no-v-html -->
            <span v-html="turnObj.brief" />
          </span>
        </div>
      </div>
      <div v-if="!isEditMode" :style="rowGridStyle">
        <div
          v-for="(turnObj, turnIdx) in reservedCommandList.slice(0, viewMaxTurn)"
          :key="turnIdx"
          class="action_pad d-grid"
        >
          <BButton
            :variant="turnIdx % 2 == 0 ? 'secondary' : 'dark'"
            size="sm"
            class="simple_action_btn bi bi-pencil"
            @click="toggleQuickReserveForm(turnIdx)"
          />
        </div>
      </div>
    </div>
    <div class="row gx-1">
      <div class="col d-grid">
        <BDropdown :split="isEditMode" text="당기기" @click="pullGeneralCommandSingle">
          <BDropdownItem v-for="turnIdx in maxPushTurn" :key="turnIdx" @click="pushGeneralCommand(-turnIdx)">
            {{ turnIdx }}턴
          </BDropdownItem>
        </BDropdown>
      </div>
      <div class="col d-grid">
        <BDropdown :split="isEditMode" text="미루기" @click="pushGeneralCommandSingle">
          <BDropdownItem v-for="turnIdx in maxPushTurn" :key="turnIdx" @click="pushGeneralCommand(turnIdx)">
            {{ turnIdx }}턴
          </BDropdownItem>
        </BDropdown>
      </div>
      <div class="col d-grid">
        <BButton @click="toggleViewMaxTurn">
          {{ flippedMaxTurn == viewMaxTurn ? "펼치기" : "접기" }}
        </BButton>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
declare const staticValues: {
  maxTurn: number;
  maxPushTurn: number;
  commandList: {
    category: string;
    values: CommandItem[];
  }[];
  serverNow: string;
  serverNick: string;
  mapName: string;
  unitSet: string;
};
</script>

<script lang="ts" setup>
import addMinutes from "date-fns/esm/addMinutes";
import { range, trim } from "lodash";
import { stringifyUrl } from "query-string";
import { onMounted, ref, watch } 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 DragSelect from "@/components/DragSelect.vue";
import { SammoAPI } from "./SammoAPI";
import type { CommandItem } from "@/defs";
import CommandSelectForm from "@/components/CommandSelectForm.vue";
import { BButton, BButtonGroup, BDropdownItem, BDropdown, BDropdownText, BDropdownDivider } from "bootstrap-vue-3";
import { StoredActionsHelper } from "./util/StoredActionsHelper";
import type { TurnObj } from "@/defs";
import type { Args } from "./processing/args";
import { QueryActionHelper } from "./util/QueryActionHelper";
import SimpleClock from "./components/SimpleClock.vue";
import type { ReservedCommandResponse } from "./defs/API/Command";

const { maxTurn, maxPushTurn, commandList } = staticValues;

const listReqArgCommand = new Set<string>();
const selectedCommand = ref(staticValues.commandList[0].values[0]);
const commandSelectForm = ref<InstanceType<typeof CommandSelectForm> | null>(null);

for (const commandCategories of commandList) {
  if (!commandCategories.values) {
    continue;
  }
  for (const commandObj of commandCategories.values) {
    if (!commandObj.reqArg) {
      continue;
    }
    listReqArgCommand.add(commandObj.value);
  }
}

function toggleForm($event: Event): void {
  $event.preventDefault();

  const form = commandSelectForm.value;
  if (!form) {
    return;
  }
  form.toggle();
}

function isDropdownChildren(e?: Event): boolean {
  if (!e) {
    return false;
  }
  if (!e.target) {
    return false;
  }
  if (
    (e.target as HTMLElement).classList.contains("dropdown-item") ||
    (e.target as HTMLElement).classList.contains("dropdown-toggle-split") ||
    (e.target as HTMLElement).classList.contains("ignoreMe")
  ) {
    return true;
  }
  return false;
}

const queryActionHelper = new QueryActionHelper(staticValues.maxTurn);
const storedActionsHelper = new StoredActionsHelper(
  staticValues.serverNick,
  "general",
  staticValues.mapName,
  staticValues.unitSet
);

const reservedCommandList = queryActionHelper.reservedCommandList;
const prevSelectedTurnList = queryActionHelper.prevSelectedTurnList;
const selectedTurnList = queryActionHelper.selectedTurnList;

const isEditMode = storedActionsHelper.isEditMode;

const flippedMaxTurn = 14;

const editModeRowHeight = 29.35;
const basicModeRowHeight = 34.4;
const viewMaxTurn = ref(flippedMaxTurn);
const rowGridStyle = ref({
  display: "grid",
  gridTemplateRows: `repeat(${viewMaxTurn.value}, ${isEditMode.value ? editModeRowHeight : basicModeRowHeight}px)`,
});

watch([isEditMode, viewMaxTurn], ([isEditMode, maxTurn]) => {
  rowGridStyle.value.gridTemplateRows = `repeat(${maxTurn}, ${isEditMode ? editModeRowHeight : basicModeRowHeight}px)`;
});

const isDragSingle = ref(false);
const isDragToggle = ref(false);

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

function toggleViewMaxTurn() {
  if (viewMaxTurn.value == flippedMaxTurn) {
    viewMaxTurn.value = maxTurn;
  } else {
    viewMaxTurn.value = flippedMaxTurn;
  }
}

async function repeatGeneralCommand(amount: number) {
  try {
    await SammoAPI.Command.RepeatCommand({ amount });
  } catch (e) {
    console.error(e);
    alert(`실패했습니다: ${e}`);
    return;
  }
  await reloadCommandList();
}

async function pushGeneralCommand(amount: number) {
  try {
    await SammoAPI.Command.PushCommand({ amount });
  } catch (e) {
    console.error(e);
    alert(`실패했습니다: ${e}`);
    return;
  }
  await reloadCommandList();
}

const serverNow = ref(new Date());

function pushGeneralCommandSingle(e: Event) {
  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
  if (isDropdownChildren(e)) {
    return;
  }
  if (!isEditMode.value) {
    return;
  }
  void pushGeneralCommand(1);
}

function pullGeneralCommandSingle(e: Event) {
  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
  if (isDropdownChildren(e)) {
    return;
  }
  if (!isEditMode.value) {
    return;
  }
  void pushGeneralCommand(-1);
}

async function reloadCommandList() {
  let result: ReservedCommandResponse;
  try {
    result = await SammoAPI.Command.GetReservedCommand();
  } catch (e) {
    console.error(e);
    alert(`실패했습니다: ${e}`);
    return;
  }

  let yearMonth = joinYearMonth(result.year, result.month);

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

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

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

    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.value.push({
      ...obj,
      year,
      month,
      time: formatTime(nextTurnTime, "HH:mm"),
      tooltip: tooltip.length == 0 ? undefined : tooltip.join("\n"),
      style,
    });

    yearMonth += 1;
    nextTurnTime = addMinutes(nextTurnTime, result.turnTerm);
  }

  serverNow.value = parseTime(result.date);
}

async function reserveCommandDirect(args: [number[], TurnObj][], reload = true): Promise<boolean> {
  const query: {
    turnList: number[];
    action: string;
    arg: Args;
  }[] = [];
  for (const [turnList, { action, arg }] of args) {
    query.push({
      turnList,
      action,
      arg,
    });
  }

  try {
    await SammoAPI.Command.ReserveBulkCommand(query);
    queryActionHelper.releaseSelectedTurnList();
  } catch (e) {
    console.error(e);
    alert(`실패했습니다: ${e}`);
    return false;
  }

  if (reload) {
    await reloadCommandList();
  }
  return true;
}

async function reserveCommand() {
  let reqTurnList: number[] = queryActionHelper.getSelectedTurnList();

  const commandName = selectedCommand.value.value;

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

  try {
    const result = await SammoAPI.Command.ReserveCommand({
      turnList: reqTurnList,
      action: commandName,
    });

    storedActionsHelper.pushRecentActions({
      action: commandName,
      brief: result.brief,
      arg: {},
    });

    queryActionHelper.releaseSelectedTurnList();
  } catch (e) {
    console.error(e);
    alert(`실패했습니다: ${e}`);
    return;
  }
  await reloadCommandList();
}

function chooseCommand(val?: string) {
  if (!val) {
    return;
  }
  selectedCommand.value = invCommandMap[val];
  void reserveCommand();
}

const commandQuickReserveForm = ref<InstanceType<typeof CommandSelectForm> | null>(null);

const currentQuickReserveTarget = ref(-1);
function chooseQuickReserveCommand(val?: string) {
  if (!val) {
    return;
  }
  selectedCommand.value = invCommandMap[val];
  selectedTurnList.value.clear();
  selectedTurnList.value.add(currentQuickReserveTarget.value);
  void reserveCommand();
}
function toggleQuickReserveForm(turnIdx: number) {
  if (turnIdx == currentQuickReserveTarget.value) {
    commandQuickReserveForm.value?.toggle();
    return;
  }
  currentQuickReserveTarget.value = turnIdx;
  commandQuickReserveForm.value?.show();
}

watch(isEditMode, (newEditMode) => {
  if (newEditMode) {
    commandQuickReserveForm.value?.close();
    currentQuickReserveTarget.value = -1;
  } else {
    commandSelectForm.value?.close();
  }
});

const emptyTurnObj: TurnObj = { action: "휴식", brief: "휴식", arg: {} };

const recentActions = storedActionsHelper.recentActions;
const storedActions = storedActionsHelper.storedActions;
const activatedCategory = storedActionsHelper.activatedCategory;

async function eraseSelectedTurnList(releaseSelect = true): Promise<boolean> {
  const result = await reserveCommandDirect([[queryActionHelper.getSelectedTurnList(), emptyTurnObj]]);
  if (releaseSelect) {
    queryActionHelper.releaseSelectedTurnList();
  }
  return result;
}

const clipboard = storedActionsHelper.clipboard;

async function clipboardCut(releaseSelect = true) {
  clipboardCopy(false);
  return eraseSelectedTurnList(releaseSelect);
}

function clipboardCopy(releaseSelect = true) {
  clipboard.value = queryActionHelper.extractQueryActions();
  if (releaseSelect) {
    queryActionHelper.releaseSelectedTurnList();
  }
}

async function clipboardPaste(releaseSelect = true) {
  const rawActions = clipboard.value;
  if (rawActions === undefined) {
    return;
  }

  const actions = queryActionHelper.amplifyQueryActions(rawActions, queryActionHelper.getSelectedTurnList());
  if (actions.length === 0) {
    return;
  }

  const result = await reserveCommandDirect(actions);
  if (releaseSelect) {
    queryActionHelper.releaseSelectedTurnList();
  }
  return result;
}

async function subRepeatCommand(releaseSelect = true): Promise<boolean> {
  const reqTurnList = queryActionHelper.getSelectedTurnList();
  const selectedMinTurnIdx = reqTurnList[0];
  const selectedMaxTurnIdx = reqTurnList[reqTurnList.length - 1];
  const queryLength = selectedMaxTurnIdx - selectedMinTurnIdx + 1;

  const rawActions = queryActionHelper.extractQueryActions();
  const actions = queryActionHelper.amplifyQueryActions(rawActions, range(selectedMinTurnIdx, maxTurn, queryLength));

  const result = await reserveCommandDirect(actions);
  if (releaseSelect) {
    queryActionHelper.releaseSelectedTurnList();
  }
  return result;
}

async function eraseAndPullCommand(releaseSelect = true): Promise<boolean> {
  const reqTurnList = queryActionHelper.getSelectedTurnList();
  const selectedMinTurnIdx = reqTurnList[0];
  const selectedMaxTurnIdx = reqTurnList[reqTurnList.length - 1];
  const queryLength = selectedMaxTurnIdx - selectedMinTurnIdx + 1;

  if (selectedMinTurnIdx === 0) {
    await pushGeneralCommand(-queryLength);
    return true;
  }

  if (selectedMinTurnIdx + queryLength == maxTurn) {
    return eraseSelectedTurnList(releaseSelect);
  }

  const actions: [number[], TurnObj][] = [];

  const emptyTurnList: number[] = [];

  for (const srcTurnIdx of range(selectedMinTurnIdx + queryLength, maxTurn)) {
    const rawAction = reservedCommandList.value[srcTurnIdx];
    if (rawAction.action == emptyTurnObj.action) {
      emptyTurnList.push(srcTurnIdx - queryLength);
      continue;
    }
    actions.push([
      [srcTurnIdx - queryLength],
      {
        action: rawAction.action,
        arg: rawAction.arg,
        brief: rawAction.brief,
      },
    ]);
  }

  emptyTurnList.push(...range(maxTurn - queryLength, maxTurn));
  actions.push([emptyTurnList, emptyTurnObj]);

  const result = await reserveCommandDirect(actions);
  if (releaseSelect) {
    queryActionHelper.releaseSelectedTurnList();
  }
  return result;
}

async function pushEmptyCommand(releaseSelect = true): Promise<boolean> {
  const reqTurnList = queryActionHelper.getSelectedTurnList();
  const selectedMinTurnIdx = reqTurnList[0];
  const selectedMaxTurnIdx = reqTurnList[reqTurnList.length - 1];
  const queryLength = selectedMaxTurnIdx - selectedMinTurnIdx + 1;

  if (selectedMinTurnIdx === 0) {
    await pushGeneralCommand(queryLength);
    return true;
  }

  if (selectedMaxTurnIdx == maxTurn) {
    return eraseSelectedTurnList(releaseSelect);
  }

  const actions: [number[], TurnObj][] = [];

  const emptyTurnList: number[] = [];

  for (const srcTurnIdx of range(selectedMinTurnIdx, maxTurn - queryLength)) {
    const rawAction = reservedCommandList.value[srcTurnIdx];
    if (rawAction.action == emptyTurnObj.action) {
      emptyTurnList.push(srcTurnIdx + queryLength);
      continue;
    }
    actions.push([
      [srcTurnIdx + queryLength],
      {
        action: rawAction.action,
        arg: rawAction.arg,
        brief: rawAction.brief,
      },
    ]);
  }

  emptyTurnList.push(...range(selectedMinTurnIdx, selectedMinTurnIdx + queryLength));
  actions.push([emptyTurnList, emptyTurnObj]);

  const result = await reserveCommandDirect(actions);
  if (releaseSelect) {
    queryActionHelper.releaseSelectedTurnList();
  }
  return result;
}

function setStoredActions() {
  const actions = queryActionHelper.extractQueryActions();
  const turnBrief = new Map<number, string>();
  for (const [subTurnList, action] of actions) {
    const actionName = action.action.split("_");
    const actionShortName = actionName.length == 1 ? actionName[0] : actionName[1];
    for (const turnIdx of subTurnList) {
      turnBrief.set(turnIdx, actionShortName[0]);
    }
  }

  const turnBriefStr = Array.from(turnBrief.entries())
    .sort(([turnA], [turnB]) => turnA - turnB)
    .map(([, action]) => action)
    .join("");

  const nickName = trim(prompt("선택한 턴들의 별명을 지어주세요", turnBriefStr) ?? "");
  if (nickName == "") {
    return;
  }

  storedActionsHelper.setStoredActions(nickName, actions);
  queryActionHelper.releaseSelectedTurnList();
}

function deleteStoredActions(actionKey: string) {
  storedActionsHelper.deleteStoredActions(actionKey);
}

async function useStoredAction(rawActions: [number[], TurnObj][]) {
  const reqTurnList = queryActionHelper.getSelectedTurnList();
  const actions = queryActionHelper.amplifyQueryActions(rawActions, reqTurnList);
  const result = await reserveCommandDirect(actions);
  queryActionHelper.releaseSelectedTurnList();
  return result;
}

onMounted(() => {
  void reloadCommandList();
});
</script>
<style lang="scss">
@use "sass:color";

@import "@scss/common/break_500px.scss";
@import "@scss/common/variables.scss";
@import "@scss/common/bootswatch_custom_variables.scss";
@import "@scss/game_bg.scss";

.commandPad {
  background-color: $gray-900;
  position: relative;
}

.commandTable {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(20px, 0.8fr) minmax(75px, 2.4fr) minmax(40px, 0.9fr)
    4.8fr minmax(28px, 0.8fr);
  //30, 70, 37.65, 160
}

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

@include media-1000px {
  .commandPad {
    margin-left: 10px;

    .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;
  }

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

    .btn {
      transition: none !important;
    }
  }

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

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

.plain-center {
  background-color: black;
}

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

.turn_pad {
  white-space: nowrap;
  background-color: $nbase2color;
}

.turn_pad:nth-child(2n) {
  background-color: color.adjust($nbase2color, $lightness: -5%);
}

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