const KILL_LOG_LIMIT = 30;

export function resetKillLog(nodes) {
  const { logNode, listNode } = nodes;

  if (listNode) {
    listNode.replaceChildren();
  }

  logNode?.classList.remove("has-entries");
  logNode?.setAttribute("aria-hidden", "true");
}

export function appendKillLog(nodes, winner, defender) {
  const { logNode, listNode } = nodes;

  if (!logNode || !listNode) {
    return;
  }

  const item = document.createElement("li");
  const killer = killLogFighterParts(winner);
  const victim = killLogFighterParts(defender);
  const action = document.createElement("span");
  const weapon = document.createElement("span");
  const actionText = document.createElement("span");

  item.className = "kill-log-item";
  item.style.setProperty("--killer-color", winner.team?.color ?? "#e3b24f");
  item.style.setProperty("--victim-color", defender.team?.color ?? "#e3b24f");
  item.setAttribute(
    "aria-label",
    `${killer.teamLabel} ${killer.memberLabel} 처치 ${victim.teamLabel} ${victim.memberLabel}`,
  );

  action.className = "kill-log-action";
  weapon.className = "kill-log-weapon";
  weapon.setAttribute("aria-hidden", "true");
  actionText.className = "kill-log-action-text";
  actionText.textContent = "처치";
  action.append(weapon, actionText);

  item.append(
    createKillLogFighterNode(killer, "killer"),
    action,
    createKillLogFighterNode(victim, "victim"),
  );
  listNode.prepend(item);

  while (listNode.children.length > KILL_LOG_LIMIT) {
    listNode.lastElementChild?.remove();
  }

  logNode.classList.add("has-entries");
  logNode.setAttribute("aria-hidden", "false");
}

function createKillLogFighterNode(fighterParts, role) {
  const container = document.createElement("span");
  const avatar = document.createElement("span");
  const copy = document.createElement("span");
  const team = document.createElement("span");
  const member = document.createElement("span");

  container.className = `kill-log-fighter ${role}`;
  avatar.className = "kill-log-avatar";
  if (fighterParts.avatarUrl) {
    avatar.style.backgroundImage = `url("${fighterParts.avatarUrl}")`;
  }
  avatar.setAttribute("aria-hidden", "true");
  copy.className = "kill-log-copy";
  team.className = "kill-log-team";
  team.textContent = fighterParts.teamLabel;
  member.className = "kill-log-member";
  member.textContent = fighterParts.memberLabel;

  copy.append(team, member);
  container.append(avatar, copy);

  return container;
}

function killLogFighterParts(fighter) {
  return {
    teamLabel: fighter?.team?.label ?? "Unknown",
    memberLabel: fighter?.skin?.key ?? fighter?.skin?.label ?? fighter?.fighterName ?? "fighter",
    avatarUrl: fighterSkinIdleUrl(fighter?.skin),
  };
}

function fighterSkinIdleUrl(skin) {
  const idleFile = skin?.animations?.idle?.file;

  if (!skin?.assetRoot || !idleFile) {
    return "";
  }

  return `${skin.assetRoot}/${idleFile}`;
}