import { describe, expect, it } from "vitest";
import {
  defineToolcraft,
  fireEvent,
  renderControlsPanel,
  renderControlsPanelWithSchema,
  screen,
} from "../testing/controls-panel-test-utils";

describe("ControlsPanel state and reset behavior", () => {
  it("binds control changes and reset actions to runtime state", () => {
    renderControlsPanel();

    const promptInput = screen.getByDisplayValue("Initial prompt");

    fireEvent.change(promptInput, { target: { value: "Updated prompt" } });
    expect(screen.getByTestId("prompt-value").textContent).toBe("Updated prompt");

    const enabledField = screen.getByText("Enabled").closest('[role="group"]');
    const enabledSwitch = enabledField?.querySelector<HTMLElement>('[role="switch"]');

    fireEvent.click(enabledSwitch as HTMLElement);
    expect(screen.getByTestId("enabled-value").textContent).toBe("false");

    fireEvent.click(screen.getByRole("button", { name: "Reset controls" }));

    expect(screen.getByTestId("prompt-value").textContent).toBe("Initial prompt");
    expect(screen.getByTestId("enabled-value").textContent).toBe("true");
  });

  it("resets only controls from the selected section header action", () => {
    const schema = defineToolcraft({
      canvas: { enabled: false },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                toneName: {
                  defaultValue: "Soft",
                  label: "Tone name",
                  target: "tone.name",
                  type: "text",
                },
              },
              title: "Tone",
            },
            {
              controls: {
                prompt: {
                  defaultValue: "Poster",
                  label: "Prompt",
                  target: "generation.prompt",
                  type: "text",
                },
              },
              title: "Output",
            },
          ],
          title: "Controls",
        },
      },
    });
    const { container } = renderControlsPanelWithSchema(schema);

    fireEvent.change(screen.getByDisplayValue("Soft"), {
      target: { value: "Sharp" },
    });
    fireEvent.change(screen.getByDisplayValue("Poster"), {
      target: { value: "Banner" },
    });

    const toneHeader = screen
      .getByText("Tone")
      .closest<HTMLElement>('[data-slot="control-section-header"]');
    const headerButtons = toneHeader?.querySelectorAll("button");

    expect(headerButtons?.[0]?.getAttribute("data-control-section-reset-button")).toBe("");
    expect(headerButtons?.[1]?.getAttribute("data-control-section-collapse-button")).toBe("");

    fireEvent.click(screen.getByRole("button", { name: "Reset Tone section" }));

    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");

    expect(values["tone.name"]).toBe("Soft");
    expect(values["generation.prompt"]).toBe("Banner");
    expect(container.querySelector('[data-control-section-reset-button]')).toBeTruthy();
  });

  it("clears file upload previews from the selected section reset action", () => {
    const schema = defineToolcraft({
      canvas: { enabled: true, upload: true },
      panels: {
        controls: {
          sections: [
            {
              controls: {
                source: {
                  defaultValue: null,
                  label: "Image",
                  target: "media.source",
                  type: "fileDrop",
                },
              },
              title: "Source Image",
            },
          ],
          title: "Controls",
        },
      },
    });

    renderControlsPanelWithSchema(schema, {}, {
      mediaAssets: [
        {
          dataUrl:
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'/%3E",
          fileName: "source.svg",
          id: "media-1",
          layerId: "layer-1",
          mimeType: "image/svg+xml",
          position: { x: 0, y: 0 },
          size: { height: 300, unit: "px", width: 400 },
          sourceTarget: "media.source",
        },
      ],
    });

    expect(screen.getByRole("img", { name: "source.svg" })).toBeTruthy();
    expect(screen.getByTestId("media-count").textContent).toBe("1");

    fireEvent.click(screen.getByRole("button", { name: "Reset Source Image section" }));

    expect(screen.queryByRole("img", { name: "source.svg" })).toBeNull();
    expect(screen.getByTestId("media-count").textContent).toBe("0");
  });
});