import {
  cleanup,
  fireEvent,
  render,
  screen,
  within,
} from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import {
  AnimationsTab,
  QUANTITY_ANIMATION_OPTIONS,
  SWATCH_ANIMATION_OPTIONS,
} from ".";

afterEach(cleanup);

describe("shared animation catalogs", () => {
  it("renders every quantity and tooltip animation as an interactive preview", () => {
    render(
      <AnimationsTab
        settings={{ enable_tooltips: true, quantity_custom_buttons: true }}
        setSettings={vi.fn()}
        adminColor="#46a5e5"
      />,
    );

    expect(QUANTITY_ANIMATION_OPTIONS).toHaveLength(17);
    expect(SWATCH_ANIMATION_OPTIONS).toHaveLength(8);
    for (const option of SWATCH_ANIMATION_OPTIONS) {
      expect(
        screen.getByRole("button", {
          name: `${option.value} animation preview`,
        }),
      ).toBeTruthy();
    }
    for (const option of QUANTITY_ANIMATION_OPTIONS) {
      expect(
        screen.getByRole("button", {
          name: `Preview ${option.value} increase quantity animation`,
        }),
      ).toBeTruthy();
    }
    expect(
      screen.getAllByRole("button", {
        name: /^Preview .* tooltip animation$/i,
      }),
    ).toHaveLength(12);
  });

  it("keeps the mobile animation control inside the chip animation section", () => {
    render(
      <AnimationsTab
        settings={{ animation_type: "glow" }}
        setSettings={vi.fn()}
        adminColor="#46a5e5"
      />,
    );

    const chipSection = screen.getByRole("region", {
      name: "Chip Animations",
    });
    expect(
      within(chipSection).getByText("Disable Chip Animations on Mobile"),
    ).toBeTruthy();
  });

  it("enables custom quantity buttons before navigating to their settings", () => {
    const setSettings = vi.fn();
    const navigateToField = vi.fn();

    render(
      <AnimationsTab
        settings={{ quantity_custom_buttons: false }}
        setSettings={setSettings}
        adminColor="#46a5e5"
        navigateToField={navigateToField}
      />,
    );

    fireEvent.click(
      screen.getByRole("button", {
        name: "Enable Custom Quantity Buttons",
      }),
    );

    expect(setSettings).toHaveBeenCalledWith({
      quantity_custom_buttons: true,
    });
    expect(navigateToField).toHaveBeenCalledWith({
      id: "quantity-custom-buttons",
      tabId: "quantity",
      subTab: "quantity",
    });
  });

  it("uses the current WordPress profile color for animation demos", () => {
    const adminColor = "#7c3aed";
    render(
      <AnimationsTab
        settings={{ enable_tooltips: true, quantity_custom_buttons: true }}
        setSettings={vi.fn()}
        adminColor={adminColor}
      />,
    );

    const chip = screen.getByRole("button", {
      name: "scale animation preview",
    }).firstElementChild as HTMLElement;
    const tooltip = screen.getByRole("button", {
      name: "Preview Fade tooltip animation",
    });
    const quantityPlus = screen.getByRole("button", {
      name: "Preview bloom increase quantity animation",
    });
    const quantityMinus = screen.getByRole("button", {
      name: "Preview bloom decrease quantity animation",
    });

    expect(chip.style.backgroundColor).toBe("rgb(124, 58, 237)");
    expect(tooltip.style.backgroundColor).toBe("rgb(124, 58, 237)");
    expect(quantityPlus.style.backgroundColor).toBe("rgb(124, 58, 237)");
    expect(
      quantityPlus.style.getPropertyValue("--b3-wvs-quantity-plus-halo"),
    ).toBe(adminColor);
    expect(quantityMinus.getAttribute("style")).toContain(
      "color-mix(in srgb, #7c3aed 75%, #000)",
    );
    expect(
      quantityMinus.style.getPropertyValue("--b3-wvs-quantity-minus-halo"),
    ).toBe("color-mix(in srgb, #7c3aed 75%, #000)");
  });
});