import { describe, it, beforeEach, afterEach } from "node:test";
import assert from "node:assert";
import "../test-setup.ts";
import { createRoot, type Root } from "react-dom/client";
import { act } from "@testing-library/react";
import { BackdropUpload } from "./BackdropUpload.tsx";
import { useStore } from "../store/store.ts";

describe("BackdropUpload", () => {
  let container: HTMLDivElement;
  let root: Root;

  beforeEach(() => {
    container = document.createElement("div");
    document.body.appendChild(container);
    root = createRoot(container);
    useStore.setState({
      models: [],
      selectedModelId: null,
      cameraView: "perspective",
      backdropUrl: null,
      availableModels: [],
    });
  });

  afterEach(() => {
    act(() => {
      root.unmount();
    });
    container.remove();
  });

  it("should render an upload button", async () => {
    await act(async () => {
      root.render(<BackdropUpload />);
    });

    const uploadWrapper = container.querySelector(".backdrop-upload");
    assert.ok(uploadWrapper, "Should render backdrop upload component");

    const input = container.querySelector('input[type="file"]');
    assert.ok(input, "Should have a file input");
  });

  it("should accept image files", async () => {
    await act(async () => {
      root.render(<BackdropUpload />);
    });

    const input = container.querySelector(
      'input[type="file"]',
    ) as HTMLInputElement;
    assert.ok(input.accept.includes("image/"), "Should accept image files");
  });

  it("should have a clear button when backdrop is set", async () => {
    useStore.getState().setBackdrop("blob:http://localhost/12345");

    await act(async () => {
      root.render(<BackdropUpload />);
    });

    const clearButton = container.querySelector("button.clear-backdrop");
    assert.ok(clearButton, "Should have clear backdrop button");
  });

  it("should not show clear button when no backdrop", async () => {
    await act(async () => {
      root.render(<BackdropUpload />);
    });

    const clearButton = container.querySelector("button.clear-backdrop");
    assert.ok(!clearButton, "Should not show clear button when no backdrop");
  });

  it("should clear backdrop when clear button clicked", async () => {
    useStore.getState().setBackdrop("blob:http://localhost/12345");

    await act(async () => {
      root.render(<BackdropUpload />);
    });

    const clearButton = container.querySelector(
      "button.clear-backdrop",
    ) as HTMLButtonElement;

    await act(async () => {
      clearButton.click();
    });

    assert.strictEqual(useStore.getState().backdropUrl, null);
  });

  it("should update UI when backdrop state changes", async () => {
    await act(async () => {
      root.render(<BackdropUpload />);
    });

    let clearButton = container.querySelector("button.clear-backdrop");
    assert.ok(!clearButton, "Clear button should not exist initially");

    await act(async () => {
      useStore.getState().setBackdrop("blob:http://localhost/12345");
    });

    await act(async () => {
      root.render(<BackdropUpload />);
    });

    clearButton = container.querySelector("button.clear-backdrop");
    assert.ok(clearButton, "Clear button should appear after backdrop is set");
  });
});