import type { Item } from "@proscenium/playbill";
import { capitalize } from "lodash-es";
import { html, renderMarkdown } from "#lib";
import { Section } from "./base/section";

export async function ItemCard(item: Item): Promise<string> {
  const renderedMarkdown = await renderMarkdown(item.description);

  let itemTypeDescriptor = "";

  switch (item.type) {
    case "wielded":
      itemTypeDescriptor = `Wielded (${item.hands} ${item.hands === 1 ? "Hand" : "Hands"})`;
      break;
    case "worn":
      itemTypeDescriptor = `Worn (${item.slot})`;
      break;
    case "trinket":
      itemTypeDescriptor = "Trinket";
      break;
  }

  const affinity =
    item.affinity !== "none"
      ? html`<p class="item-affinity ${item.affinity}">${item.affinity} Affinity</p>`
      : "";

  const damageType = item.damage?.type === "arc" ? "Arcane" : "Physical";
  const damageAmount = item.damage?.amount ?? 0;
  const damageRating =
    damageAmount > 0
      ? html`<p class="item-damage ${damageType}">${damageAmount} ${damageType} Damage</p>`
      : "";

  const info = html`
    <div class="item-info">
      ${affinity}
      ${damageRating}
    </div>
  `;

  return Section({
    type: "item",
    componentId: item.id,
    title: item.name,
    content: renderedMarkdown,
    info,
    rightCornerTag: capitalize(item.rarity),
    leftCornerTag: itemTypeDescriptor,
  });
}