import { render, screen, cleanup } from "@testing-library/react";
import assert from "node:assert";
import {
  describe, test, afterEach,
} from "node:test";
import { Captcha } from "./index";

describe("Captcha", () => {

  afterEach(() => {
    cleanup();
  });

  /* COMMON */

  test("renders without crashing", () => {
    render(<Captcha />);
    const div = screen.queryByTestId?.("captcha") || document.querySelector("[data-js-google-captcha]");
    assert.notStrictEqual(div, null);
  });

  test("renders children when provided", () => {
    render(
      <Captcha>
        <span>Child content</span>
      </Captcha>
    );

    assert.notStrictEqual(screen.queryByText("Child content"), null);
  });

  /* BASE CLASS */

  test("applies base class", () => {
    render(<Captcha baseClass={"customCaptcha"} />);
    const div = screen.queryByTestId?.("captcha") || document.querySelector("[data-js-google-captcha]");
    assert.strictEqual(div?.classList.contains("customCaptcha"), true);
  });

  test("applies extra classes with baseClass prefix", () => {
    render(
      <Captcha
        baseClass={"captcha"}
        extraClasses={{
          large: true,
          bordered: true,
        }}
      />
    );

    const div = screen.queryByTestId?.("captcha") || document.querySelector("[data-js-google-captcha]");
    assert.strictEqual(div?.classList.contains("captcha"), true);
    assert.strictEqual(div?.classList.contains("captcha--large"), true);
    assert.strictEqual(div?.classList.contains("captcha--bordered"), true);
  });

  /* EXTRA ATTRIBUTES */

  test("passes extra attributes", () => {
    render(
      <Captcha
        extraAttrs={{
          "data-testid": "captcha-container",
          "aria-label": "Google Captcha",
          "id": "captcha-1",
        }}
      />
    );

    const div = screen.getByTestId("captcha-container");
    assert.strictEqual(div?.getAttribute("aria-label"), "Google Captcha");
    assert.strictEqual(div?.getAttribute("id"), "captcha-1");
  });

  /* DATA ATTRIBUTES */

  test("renders with data-js-google-captcha attribute", () => {
    render(<Captcha />);
    const div = document.querySelector("[data-js-google-captcha]");
    assert.notStrictEqual(div, null);
  });

  test("passes theme to data-theme attribute", () => {
    render(<Captcha theme={"dark"} />);
    const div = document.querySelector("[data-js-google-captcha]");
    assert.strictEqual(div?.getAttribute("data-theme"), "dark");
  });

  test("renders with light theme", () => {
    render(<Captcha theme={"light"} />);
    const div = document.querySelector("[data-js-google-captcha]");
    assert.strictEqual(div?.getAttribute("data-theme"), "light");
  });

  test("does not render data-theme when theme not provided", () => {
    render(<Captcha />);
    const div = document.querySelector("[data-js-google-captcha]");
    assert.strictEqual(div?.hasAttribute("data-theme"), false);
  });

  /* SITEKEY */

  test("passes siteKey to data-sitekey attribute", () => {
    render(<Captcha siteKey={"test-key-123"} />);
    const div = document.querySelector("[data-js-google-captcha]");
    assert.strictEqual(div?.getAttribute("data-sitekey"), "test-key-123");
  });

  /* COMBINED PROPS */

  test("renders with multiple props combined", () => {
    render(
      <Captcha
        theme={"dark"}
        baseClass={"customCaptcha"}
        extraClasses={{ rounded: true }}
        extraAttrs={{ "data-testid": "combined-captcha", "data-custom": "value" }}
      >
        <div>Test content</div>
      </Captcha>
    );

    const div = screen.getByTestId("combined-captcha");
    assert.strictEqual(div?.getAttribute("data-theme"), "dark");
    assert.strictEqual(div?.classList.contains("customCaptcha"), true);
    assert.strictEqual(div?.classList.contains("customCaptcha--rounded"), true);
    assert.strictEqual(div?.getAttribute("data-custom"), "value");
    assert.notStrictEqual(screen.queryByText("Test content"), null);
  });

  /* EDGE CASES */

  test("handles undefined theme", () => {
    render(<Captcha theme={undefined} />);
    const div = document.querySelector("[data-js-google-captcha]");
    assert.strictEqual(div?.hasAttribute("data-theme"), false);
  });

  test("handles no props", () => {
    render(<Captcha />);
    const div = document.querySelector("[data-js-google-captcha]");
    assert.notStrictEqual(div, null);
    assert.strictEqual(div?.hasAttribute("data-theme"), false);
    assert.strictEqual(div?.hasAttribute("data-sitekey"), false);
  });
});