import { describe, expect, it } from "vitest";
import {
  defineToolcraft, fireEvent, renderControlsPanelWithSchema, screen,
} from "../testing/controls-panel-test-utils";

function renderCustomRatio() {
  const schema = defineToolcraft({
    base: {
      identity: { id: "custom-ratio", title: "Custom ratio" },
      canvas: { enabled: true, size: { width: 640, height: 480, unit: "px" }, sizing: { mode: "editable-output" } },
      panels: { controls: { title: "Controls", sections: [] } },
    },
    modules: [],
  });
  return renderControlsPanelWithSchema(schema, undefined, {
    values: { "canvas.aspectRatio": { mode: "custom", width: 4, height: 3, value: "4:3" } },
  });
}

describe("Custom aspect ratio", () => {
  it("renders ratio fields and applies a custom proportion on blur", () => {
    renderCustomRatio();
    const width = screen.getByRole("textbox", { name: "Ratio width" });
    fireEvent.change(width, { target: { value: "5" } });
    expect(screen.getByTestId("canvas-size").textContent).toBe("640,480");
    fireEvent.blur(width);
    expect(screen.getByTestId("canvas-size").textContent).toBe("640,384");
    expect(JSON.parse(screen.getByTestId("values-json").textContent ?? "{}")["canvas.aspectRatio"])
      .toEqual({ mode: "custom", width: 5, height: 3, value: "5:3" });
  });

  it.each(["", "0", "-4", "1.5", "oops", "Infinity"])("restores the accepted ratio after invalid input %s", (value) => {
    renderCustomRatio();
    const width = screen.getByRole("textbox", { name: "Ratio width" }) as HTMLInputElement;
    fireEvent.change(width, { target: { value } });
    fireEvent.blur(width);
    expect(width.value).toBe("4");
    expect(screen.getByTestId("canvas-size").textContent).toBe("640,480");
  });

  it("commits on Enter and cancels on Escape", () => {
    renderCustomRatio();
    const height = screen.getByRole("textbox", { name: "Ratio height" }) as HTMLInputElement;
    fireEvent.change(height, { target: { value: "5" } });
    fireEvent.keyDown(height, { key: "Enter" });
    expect(screen.getByTestId("canvas-size").textContent).toBe("640,800");
    fireEvent.focus(height);
    fireEvent.change(height, { target: { value: "9" } });
    fireEvent.keyDown(height, { key: "Escape" });
    fireEvent.blur(height);
    expect(height.value).toBe("5");
    expect(screen.getByTestId("canvas-size").textContent).toBe("640,800");
  });
});