import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { useState } from "react";
import { afterEach, describe, expect, it } from "vitest";
import { RangeSlider } from "./RangeSlider";

afterEach(cleanup);

function SliderHarness(): React.ReactElement {
  const [value, setValue] = useState(10);

  return (
    <RangeSlider
      label="Swatch size"
      description="Sets the diameter of each swatch."
      value={value}
      min={4}
      max={20}
      unit="px"
      onChange={setValue}
    />
  );
}

describe("RangeSlider", () => {
  it("associates its label, help, current output, and localized value text", () => {
    render(<SliderHarness />);

    const slider = screen.getByRole("slider", { name: "Swatch size" });
    const descriptionId = slider.getAttribute("aria-describedby");
    const output = screen.getByText("Currently 10px");

    expect(descriptionId).toBeTruthy();
    expect(document.getElementById(descriptionId ?? "")?.textContent).toBe(
      "Sets the diameter of each swatch.",
    );
    expect(slider.getAttribute("aria-valuetext")).toBe("10px");
    expect(output.tagName).toBe("OUTPUT");
    expect(output.getAttribute("for")).toBe(slider.id);
  });

  it("shows current-value feedback for keyboard focus and updates it on input", () => {
    const { container } = render(<SliderHarness />);
    const slider = screen.getByRole("slider", { name: "Swatch size" });
    const tooltip = container.querySelector<HTMLElement>(
      ".b3-wvs-range-wrap [aria-hidden='true']",
    );

    expect(tooltip?.style.opacity).toBe("0");
    fireEvent.focus(slider);
    expect(tooltip?.style.opacity).toBe("1");

    fireEvent.change(slider, { target: { value: "11" } });
    expect(slider.getAttribute("aria-valuetext")).toBe("11px");
    expect(tooltip?.textContent).toBe("11px");
    expect(screen.getByText("Currently 11px")).toBeTruthy();

    fireEvent.blur(slider);
    expect(tooltip?.style.opacity).toBe("0");
  });

  it("provides a localized fallback name when no visible label is supplied", () => {
    render(
      <RangeSlider value={50} min={0} max={100} unit="%" onChange={() => {}} />,
    );

    expect(screen.getByRole("slider", { name: "Value" })).toBeTruthy();
  });
});