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

it("resets every target owned by the section, including the inactive tab, while preserving other sections", () => {
  const schema = defineToolcraft({
    base: {
      identity: { id: "conditional-reset", title: "Conditional reset" },
      canvas: { enabled: false },
      panels: {
        controls: {
          title: "Controls",
          sections: [
            {
              id: "appearance",
              title: "Appearance",
              controls: {
                view: {
                  type: "tabs",
                  label: "Appearance",
                  target: "appearance.view",
                  applicability: { mode: "always" },
                  defaultValue: "layout",
                  options: [
                    { label: "Layout", value: "layout" },
                    { label: "Color", value: "color" },
                  ],
                },
                layout: {
                  type: "text",
                  label: "Layout name",
                  target: "appearance.layout",
                  applicability: {
                    mode: "conditional",
                    all: [{ target: "appearance.view", equals: "layout" }],
                  },
                  defaultValue: "Original layout",
                },
                color: {
                  type: "text",
                  label: "Color name",
                  target: "appearance.color",
                  applicability: {
                    mode: "conditional",
                    all: [{ target: "appearance.view", equals: "color" }],
                  },
                  defaultValue: "Original color",
                },
              },
            },
            {
              id: "other",
              title: "Other",
              controls: {
                text: {
                  type: "text",
                  label: "Name",
                  target: "other.name",
                  applicability: { mode: "always" },
                  defaultValue: "Original name",
                },
              },
            },
          ],
        },
      },
    },
    modules: [],
  });
  renderControlsPanelWithSchema(schema);
  fireEvent.change(screen.getByDisplayValue("Original layout"), {
    target: { value: "Changed layout" },
  });
  fireEvent.change(screen.getByDisplayValue("Original name"), {
    target: { value: "Changed name" },
  });
  fireEvent.click(screen.getByRole("tab", { name: "Color" }));
  expect(screen.queryByDisplayValue("Changed layout")).toBeNull();
  fireEvent.change(screen.getByDisplayValue("Original color"), {
    target: { value: "Changed color" },
  });
  fireEvent.click(screen.getByRole("button", { name: "Reset Appearance section" }));
  expect(JSON.parse(screen.getByTestId("values-json").textContent!)).toMatchObject({
    "appearance.view": "layout",
    "appearance.layout": "Original layout",
    "appearance.color": "Original color",
    "other.name": "Changed name",
  });
  expect(screen.getByDisplayValue("Original layout")).toBeTruthy();
  fireEvent.click(screen.getByRole("tab", { name: "Color" }));
  expect(screen.getByDisplayValue("Original color")).toBeTruthy();
});