/**
 * @file Select.test.tsx
 * @description The shared Select as a WAI-ARIA listbox button: expanded state,
 * listbox/option roles with aria-selected, aria-activedescendant tracking,
 * Arrow/Home/End/Enter/Escape/type-ahead, and focus back on the trigger.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { describe, it, expect, vi } from "vitest";
import { fireEvent, render, screen } from "@testing-library/react";
import { Select } from "../Select";

const OPTIONS = [
  { value: "a", label: "Apple" },
  { value: "b", label: "Banana" },
  { value: "c", label: "Cherry" },
  { value: "d", label: "Blueberry" },
];

function setup(value = "b") {
  const onChange = vi.fn();
  render(<Select value={value} onChange={onChange} options={OPTIONS} label="Fruit" />);
  const button = screen.getByRole("button", { name: "Fruit" });
  return { onChange, button };
}

const activeLabel = () => {
  const list = screen.getByRole("listbox");
  return document.getElementById(list.getAttribute("aria-activedescendant")!)?.textContent;
};

describe("Select (listbox button)", () => {
  it("opens on ArrowDown into a focused listbox on the chosen option", () => {
    const { button } = setup();
    expect(button).toHaveAttribute("aria-haspopup", "listbox");
    expect(button).toHaveAttribute("aria-expanded", "false");
    fireEvent.keyDown(button, { key: "ArrowDown" });
    expect(button).toHaveAttribute("aria-expanded", "true");
    const list = screen.getByRole("listbox", { name: "Fruit" });
    expect(list).toHaveFocus();
    expect(button).toHaveAttribute("aria-controls", list.id);
    expect(screen.getByRole("option", { name: "Banana" })).toHaveAttribute("aria-selected", "true");
    expect(screen.getByRole("option", { name: "Apple" })).toHaveAttribute("aria-selected", "false");
    expect(activeLabel()).toBe("Banana");
  });

  it("moves with arrows/Home/End and picks with Enter, focus back on the button", () => {
    const { button, onChange } = setup();
    fireEvent.click(button);
    const list = screen.getByRole("listbox");
    fireEvent.keyDown(list, { key: "ArrowDown" });
    expect(activeLabel()).toBe("Cherry");
    fireEvent.keyDown(list, { key: "Home" });
    expect(activeLabel()).toBe("Apple");
    fireEvent.keyDown(list, { key: "End" });
    expect(activeLabel()).toBe("Blueberry");
    fireEvent.keyDown(list, { key: "ArrowUp" });
    fireEvent.keyDown(list, { key: "Enter" });
    expect(onChange).toHaveBeenCalledWith("c");
    expect(screen.queryByRole("listbox")).toBeNull();
    expect(button).toHaveFocus();
  });

  it("Escape closes without picking and does not bubble", () => {
    const { button, onChange } = setup();
    const behind = vi.fn();
    document.addEventListener("keydown", behind);
    fireEvent.click(button);
    fireEvent.keyDown(screen.getByRole("listbox"), { key: "Escape" });
    document.removeEventListener("keydown", behind);
    expect(onChange).not.toHaveBeenCalled();
    expect(behind).not.toHaveBeenCalled();
    expect(screen.queryByRole("listbox")).toBeNull();
    expect(button).toHaveFocus();
  });

  it("type-ahead jumps to the next option starting with the typed letter", () => {
    const { button } = setup("a");
    fireEvent.click(button);
    const list = screen.getByRole("listbox");
    fireEvent.keyDown(list, { key: "b" });
    expect(activeLabel()).toBe("Banana");
    fireEvent.keyDown(list, { key: "b" });
    expect(activeLabel()).toBe("Blueberry"); // a repeated letter cycles
  });

  it("picks with a click on an option", () => {
    const { button, onChange } = setup();
    fireEvent.click(button);
    fireEvent.click(screen.getByText("Apple"));
    expect(onChange).toHaveBeenCalledWith("a");
  });
});