import { ResourceInventoryC } from "./ResourceInventoryC";
import { ResourceType } from "./ResourceType";

type ResourceUIEntry = {
  type: ResourceType;
  icon: HTMLElement;
  count: HTMLElement;
};

const PLACEHOLDER_COLORS: Record<ResourceType, string> = {
  [ResourceType.Wood]: "#6b4423",
};

export class ResourceUIC {
  private static entries = new Map<ResourceType, ResourceUIEntry>();
  private static root: HTMLElement | null = null;

  static init() {
    const uiRoot = document.getElementById("ui");
    if (!uiRoot) return;

    this.root = document.createElement("div");
    this.root.id = "resource-bar";
    this.root.className = "resource-bar";
    uiRoot.appendChild(this.root);

    this.register(ResourceType.Wood);
  }

  static register(type: ResourceType) {
    if (!this.root || this.entries.has(type)) return;

    const counter = document.createElement("div");
    counter.className = "resource-counter";
    counter.dataset.resource = type;

    const icon = document.createElement("div");
    icon.className = "resource-icon";
    icon.style.backgroundColor = PLACEHOLDER_COLORS[type];

    const count = document.createElement("span");
    count.className = "resource-count";
    count.textContent = "0";

    counter.appendChild(icon);
    counter.appendChild(count);
    this.root.appendChild(counter);

    this.entries.set(type, { type, icon, count });
    this.refresh(type);
  }

  static getIconCenter(type: ResourceType) {
    const entry = this.entries.get(type);
    if (!entry) return null;

    const rect = entry.icon.getBoundingClientRect();
    return {
      x: rect.left + rect.width / 2,
      y: rect.top + rect.height / 2,
    };
  }

  static refresh(type: ResourceType) {
    const entry = this.entries.get(type);
    if (!entry) return;

    entry.count.textContent = String(ResourceInventoryC.get(type));
  }
}