import { describe, expect, it } from "vitest";

import { getToolcraftCollectionItemControlAddress } from "../../../state/collection-control-address";
import type { ResolvedToolcraftAppSchema } from "../../../schema/resolved-app-schema";
import {
  createSchema as createBaseSchema,
  fireEvent,
  renderControlsPanelWithSchema,
  screen,
} from "../testing/controls-panel-test-utils";

function createSchema() {
  const base = createBaseSchema();
  const controls = {
    sections: [
            {
              controls: {
                notes: {
                  applicability: { mode: "always", origin: "explicit" },
                  defaultValue: [
                    { color: "#14B8A6", opacity: 60, position: { x: 0, y: 0 } },
                  ],
                  itemControls: {
                    color: { defaultValue: "#14B8A6", label: "Color", type: "color" },
                    opacity: {
                      defaultValue: 60,
                      keyframeable: true,
                      label: "Opacity",
                      max: 100,
                      min: 0,
                      type: "slider",
                    },
                    position: {
                      defaultValue: { x: 0, y: 0 },
                      keyframeable: true,
                      label: "Position",
                      type: "vector",
                    },
                  },
                  selectionTarget: "storyboard.selectedNote",
                  target: "storyboard.notes",
                  type: "collectionActions",
                },
              },
              id: "notes",
              title: "Notes",
            },
    ],
    title: "Controls",
  } satisfies NonNullable<ResolvedToolcraftAppSchema["panels"]["controls"]>;

  return {
    ...base,
    panels: { ...base.panels, controls },
  } satisfies ResolvedToolcraftAppSchema;
}

describe("ControlsPanel collection keyframes", () => {
  it("shows diamonds only for opted-in fields and dispatches atomic field commands", () => {
    renderControlsPanelWithSchema(createSchema(), {}, {
      timeline: { expanded: true },
    });

    expect(screen.getByRole("button", { name: "Add Opacity keyframe" })).toBeTruthy();
    expect(screen.getByRole("button", { name: "Add Position keyframe" })).toBeTruthy();
    expect(screen.queryByRole("button", { name: "Add Color keyframe" })).toBeNull();

    fireEvent.click(screen.getByRole("button", { name: "Add Opacity keyframe" }));
    const address = getToolcraftCollectionItemControlAddress(
      "storyboard.notes",
      0,
      "opacity",
    );
    expect(screen.getByTestId("timeline-keyframes").textContent).toContain(address);

    fireEvent.change(screen.getByLabelText("Opacity"), {
      target: { value: "25" },
    });
    expect(screen.getByTestId("values-json").textContent).toContain('"opacity":25');
  });

  it("selects a collection item through the panel-owned item surface", () => {
    const { container } = renderControlsPanelWithSchema(createSchema(), {}, {
      timeline: { expanded: true },
    });
    const item = container.querySelector("[data-toolcraft-collection-item-index='0']");
    expect(item).toBeTruthy();
    fireEvent.pointerDown(item!);
    expect(screen.getByTestId("values-json").textContent).toContain(
      '"storyboard.selectedNote":0',
    );
  });
});