import {
  cleanup,
  fireEvent,
  render,
  renderHook,
  waitFor,
} from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import SwatchGroup from "./SwatchGroup";
import { useSwatchSettings } from "../hooks/useSwatchSettings";
import { initQuantityButtons } from "../quantityButtons";

afterEach(() => {
  cleanup();
  document.body.innerHTML = "";
  vi.unstubAllGlobals();
});

describe("Free presentation without the extension bundle", () => {
  it("publishes the shared label size through the normalized typography variable", async () => {
    const select = document.createElement("select");
    select.innerHTML =
      '<option value="">Choose</option><option value="large">Large</option>';
    document.body.append(select);
    const { container } = render(
      <SwatchGroup
        attribute="size"
        select={select}
        swatches={{
          large: { type: "button", color: "", label: "Large" },
        }}
        settingsOverride={{
          enable_tooltips: false,
          label_font_size: 19,
        }}
      />,
    );

    await waitFor(() =>
      expect(container.querySelector('[role="radio"]')).not.toBeNull(),
    );
    const label = container.querySelector<HTMLElement>(
      '[role="radio"] [data-b3-wvs-swatch-text]',
    );
    expect(label?.style.getPropertyValue("--b3-wvs-swatch-font-size")).toBe(
      "19px",
    );
  });

  it("applies mobile overrides and independent button sizing", () => {
    const settings = {
      use_mobile_layout: true,
      mobile_cutoff: 768,
      layout: "wrap",
      shape: "square",
      swatch_style: "underline",
      mobile_layout: "grid",
      mobile_shape: "circle",
      mobile_swatch_style: "background",
      mobile_grid_max_columns: 3,
      mobile_swatch_gap: 14,
      button_custom_sizing: true,
      button_swatch_width: 54,
      button_swatch_height: 42,
    };
    const { result, rerender } = renderHook(
      ({ width }) => useSwatchSettings(settings, width),
      { initialProps: { width: 390 } },
    );
    expect(result.current).toMatchObject({
      layout: "grid",
      shape: "circle",
      swatchStyle: "background",
      gridMaxColumns: 3,
      swatchGap: 14,
      buttonSwatchWidth: 54,
      buttonSwatchHeight: 42,
    });
    rerender({ width: 1200 });
    expect(result.current).toMatchObject({
      layout: "wrap",
      shape: "square",
      swatchStyle: "underline",
    });
  });

  it("renders container styling and swatch-derived glow, and clears on reselect", async () => {
    const select = document.createElement("select");
    select.innerHTML =
      '<option value="">Choose</option><option value="red">Red</option>';
    document.body.append(select);
    const { container } = render(
      <SwatchGroup
        attribute="color"
        select={select}
        swatches={{ red: { type: "color", color: "#ff0000", label: "Red" } }}
        settingsOverride={{
          enable_tooltips: false,
          clear_on_reselect: true,
          enable_dropdown_bg: true,
          dropdown_bg_color: "#112233",
          dropdown_border_type: "dashed",
          animation_type: "glow",
          glow_use_swatch_color: true,
        }}
      />,
    );
    await waitFor(() =>
      expect(container.querySelector('[role="radio"]')).not.toBeNull(),
    );
    const radio = container.querySelector<HTMLElement>('[role="radio"]')!;
    expect(
      container.querySelector<HTMLElement>('[role="radiogroup"]')!.style
        .borderStyle,
    ).toBe("dashed");
    expect(radio.classList.contains("b3-wvs-swatch-glow")).toBe(true);
    expect(radio.style.getPropertyValue("--b3-wvs-glow-color")).toBe("#ff0000");
    fireEvent.click(radio);
    expect(select.value).toBe("red");
    fireEvent.click(radio);
    expect(select.value).toBe("");
    expect(radio.getAttribute("aria-checked")).toBe("false");
  });

  it("initializes quantity controls once and respects WooCommerce limits", () => {
    vi.stubGlobal("b3WvsData", {
      settings: {
        quantity_custom_buttons: true,
        quantity_style: "rounded",
        quantity_button_position: "both-sides",
      },
    });
    document.body.innerHTML =
      '<div class="quantity"><input class="qty" type="number" min="1" max="3" step="1" value="2" /></div>';
    initQuantityButtons();
    initQuantityButtons();
    expect(document.querySelectorAll(".b3-wvs-qty-plus")).toHaveLength(1);
    const input = document.querySelector<HTMLInputElement>(".qty")!;
    const plus = document.querySelector<HTMLButtonElement>(".b3-wvs-qty-plus")!;
    plus.click();
    plus.click();
    expect(input.value).toBe("3");
    const minus =
      document.querySelector<HTMLButtonElement>(".b3-wvs-qty-minus")!;
    minus.click();
    minus.click();
    minus.click();
    expect(input.value).toBe("1");
  });
  it("uses custom quantity steps while honoring changed stock limits", () => {
    vi.stubGlobal("b3WvsData", {
      settings: {
        quantity_custom_buttons: true,
        quantity_style: "rounded",
        quantity_custom_limits: true,
        quantity_min: 2,
        quantity_max: 10,
        quantity_step: 2,
      },
    });
    document.body.innerHTML =
      '<div class="quantity"><input class="qty" type="number" min="2" max="8" step="2" value="2" /></div>';
    initQuantityButtons();
    const input = document.querySelector<HTMLInputElement>(".qty")!;
    const plus = document.querySelector<HTMLButtonElement>(".b3-wvs-qty-plus")!;
    plus.click();
    expect(input.value).toBe("4");
    input.max = "5";
    plus.click();
    expect(input.value).toBe("4");
    input.disabled = true;
    plus.click();
    expect(input.value).toBe("4");
    input.disabled = false;
    input.max = "0";
    plus.click();
    expect(input.value).toBe("0");
  });
});