import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import type { Settings } from "../../types";
import { QuantityTab } from ".";

afterEach(cleanup);

describe("shared QuantityTab", () => {
  it("keeps sizing independent from border overrides and orders right-side controls", () => {
    render(
      <QuantityTab
        settings={{
          quantity_custom_buttons: true,
          quantity_style: "pill",
          quantity_button_style: "square",
          quantity_button_position: "right",
          quantity_width: 144,
          quantity_height: 24,
          quantity_custom_sizing: false,
          quantity_border_width: 8,
          quantity_font_size: 24,
        }}
        setSettings={vi.fn()}
        adminColor="#46a5e5"
      />,
    );
    const input = screen.getByRole("spinbutton", {
      name: "Preview quantity",
    }) as HTMLInputElement;
    const minus = screen.getByRole("button", {
      name: "Decrease quantity",
    });
    const plus = screen.getByRole("button", {
      name: "Increase quantity",
    });
    expect(input.style.width).toBe("144px");
    expect(input.style.height).toBe("24px");
    expect(input.style.borderWidth).toBe("1px");
    expect(input.style.fontSize).toBe("16px");
    expect(plus.style.width).toBe("24px");
    expect(plus.style.borderRadius).toBe("4px");
    expect(input.nextElementSibling).toBe(minus);
    expect(minus.nextElementSibling).toBe(plus);
  });
  it("uses the verified absolute-multiple limits in its working preview", () => {
    render(
      <QuantityTab
        settings={
          {
            quantity_custom_buttons: true,
            quantity_style: "rounded",
            quantity_custom_limits: true,
            quantity_min: 3,
            quantity_max: 7,
            quantity_step: 2,
          } as Settings
        }
        setSettings={vi.fn()}
        adminColor="#46a5e5"
      />,
    );

    const input = screen.getByRole("spinbutton", { name: "Preview quantity" });
    expect(input.getAttribute("value")).toBe("4");
    fireEvent.click(screen.getByRole("button", { name: "Increase quantity" }));
    expect(input.getAttribute("value")).toBe("6");
  });

  it("warns and disables preview actions when no configured quantity is valid", () => {
    render(
      <QuantityTab
        settings={
          {
            quantity_custom_buttons: true,
            quantity_style: "rounded",
            quantity_custom_limits: true,
            quantity_min: 3,
            quantity_max: 3,
            quantity_step: 2,
          } as Settings
        }
        setSettings={vi.fn()}
        adminColor="#46a5e5"
      />,
    );

    expect(screen.getByRole("alert").textContent).toContain("No quantity");
    expect(
      (
        screen.getByRole("button", {
          name: "Increase quantity",
        }) as HTMLButtonElement
      ).disabled,
    ).toBe(true);
    expect(
      (
        screen.getByRole("button", {
          name: "Decrease quantity",
        }) as HTMLButtonElement
      ).disabled,
    ).toBe(true);
  });
});