import { describe, expect, it, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import AuthPasswordInput from "@/components/auth/AuthPasswordInput";

describe("AuthPasswordInput", () => {
  it("renders validation feedback and delegates the visibility toggle", async () => {
    const user = userEvent.setup();
    const onToggleShow = vi.fn();
    const registration = {
      name: "password",
      onChange: vi.fn(),
      onBlur: vi.fn(),
      ref: vi.fn(),
    };
    const { rerender } = render(
      <AuthPasswordInput
        id="password"
        show={false}
        onToggleShow={onToggleShow}
        registration={registration}
        hasError
        errorMessage="كلمة المرور مطلوبة"
        placeholder="كلمة المرور"
      />,
    );

    const input = screen.getByPlaceholderText("كلمة المرور");
    expect(input).toHaveAttribute("type", "password");
    expect(screen.getByText("كلمة المرور مطلوبة")).toBeInTheDocument();
    await user.click(screen.getByRole("button"));
    expect(onToggleShow).toHaveBeenCalledOnce();

    rerender(
      <AuthPasswordInput
        id="password"
        show
        onToggleShow={onToggleShow}
        registration={registration}
        hasError={false}
        placeholder="كلمة المرور"
      />,
    );
    expect(input).toHaveAttribute("type", "text");
    expect(screen.queryByText("كلمة المرور مطلوبة")).not.toBeInTheDocument();
  });
});