import { describe, expect, it } from "vitest";
import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { HexAvatar, HEX_SIZES, HEX_TONES, toneFor } from "@/components/HexAvatar";

const render = (props: Parameters<typeof HexAvatar>[0]) => renderToStaticMarkup(createElement(HexAvatar, props));

describe("HexAvatar", () => {
  it("renders the photo when there is one", () => {
    const html = render({ name: "Ada Lovelace", pictureUrl: "https://img/a.jpg", size: "lg" });
    expect(html).toContain("<img");
    expect(html).toContain('src="https://img/a.jpg"');
    expect(html).toContain('width="46"');
    expect(html).toContain('height="53"');
    expect(html).not.toContain("AL");
  });

  it("renders initials on a tone gradient without a photo", () => {
    const html = render({ name: "Ada Lovelace", pictureUrl: null, size: "md" });
    expect(html).not.toContain("<img");
    expect(html).toContain(">AL<");
    expect(html).toContain("hex-avatar-initials");
    expect(html).toContain(`hex-avatar-${toneFor("Ada Lovelace")}`);
    expect(html).toContain('aria-hidden="true"');
  });

  it("falls back to initials for an empty picture url", () => {
    expect(render({ name: "Bo", pictureUrl: "" })).toContain(">B<");
  });

  it("has the three spec sizes at a 0.866 ratio", () => {
    expect(HEX_SIZES).toEqual({
      lg: { width: 46, height: 53 },
      md: { width: 38, height: 44 },
      sm: { width: 30, height: 35 },
    });
    for (const { width, height } of Object.values(HEX_SIZES)) {
      expect(width / height).toBeCloseTo(0.866, 1);
    }
  });

  it("picks the same tone for the same name, from the six tones", () => {
    expect(toneFor("Ada Lovelace")).toBe(toneFor("  ada lovelace "));
    for (const n of ["A", "Bo", "Carl Sagan", "Dee"]) expect(HEX_TONES).toContain(toneFor(n));
  });
});