// @vitest-environment jsdom

import * as React from "react";
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { afterEach, expect, it, vi } from "vitest";
import { EditableSliderValueLabel } from "./editable-slider-value-label";

afterEach(cleanup);

it("commits Enter plus blur once, cancels Escape, and allows another edit", () => {
  const commit = vi.fn();
  render(<EditableSliderValueLabel ariaLabel="Radius value" onCommit={commit} valueLabel="20" />);
  const begin = (draft: string) => {
    fireEvent.click(screen.getByRole("button", { name: "Edit Radius value" }));
    const editor = screen.getByRole("textbox", { name: "Radius value" });
    editor.textContent = draft;
    return editor;
  };
  const accepted = begin("40");
  fireEvent.keyDown(accepted, { key: "Enter" });
  fireEvent.blur(accepted);
  expect(commit.mock.calls).toEqual([["40"]]);
  const cancelled = begin("50");
  fireEvent.keyDown(cancelled, { key: "Escape" });
  fireEvent.blur(cancelled);
  expect(commit).toHaveBeenCalledTimes(1);
  fireEvent.blur(begin("10"));
  expect(commit.mock.calls).toEqual([["40"], ["10"]]);
});