import { fireEvent, render, screen } from "@testing-library/react";
import { expect, test, vi } from "vitest";
import { FileUpload } from "../src/file-upload";

test("FileUpload renders with data-slot attribute", () => {
  render(<FileUpload />);
  const button = document.querySelector("[data-slot='file-upload']");
  expect(button).toBeInTheDocument();
});

test("FileUpload renders as button element", () => {
  render(<FileUpload />);
  const button = screen.getByRole("button");
  expect(button).toHaveAttribute("type", "button");
});

test("FileUpload contains hidden file input", () => {
  render(<FileUpload />);
  const fileInput = document.querySelector("input[type='file']");
  expect(fileInput).toBeInTheDocument();
  expect(fileInput).toHaveClass("hidden");
});

test("FileUpload file input accepts multiple files", () => {
  render(<FileUpload />);
  const fileInput = document.querySelector(
    "input[type='file']",
  ) as HTMLInputElement;
  expect(fileInput.multiple).toBe(true);
});

test("FileUpload calls onFilesSelect when file is selected", () => {
  const onFilesSelect = vi.fn();
  render(<FileUpload onFilesSelect={onFilesSelect} />);

  const fileInput = document.querySelector(
    "input[type='file']",
  ) as HTMLInputElement;
  const mockFile = new File(["content"], "test.txt", { type: "text/plain" });
  Object.defineProperty(fileInput, "files", {
    value: [mockFile],
  });

  fireEvent.change(fileInput);

  expect(onFilesSelect).toHaveBeenCalledWith([mockFile]);
});

test("FileUpload has upload icon image", () => {
  render(<FileUpload />);
  const img = screen.getByAltText("upload");
  expect(img).toBeInTheDocument();
  expect(img).toHaveClass("w-5", "h-5");
});

test("FileUpload clears input after selection", () => {
  const onFilesSelect = vi.fn();
  render(<FileUpload onFilesSelect={onFilesSelect} />);

  const fileInput = document.querySelector(
    "input[type='file']",
  ) as HTMLInputElement;
  const mockFile = new File(["content"], "test.txt", { type: "text/plain" });
  Object.defineProperty(fileInput, "files", {
    value: [mockFile],
  });

  fireEvent.change(fileInput);

  expect(fileInput.value).toBe("");
});