import { fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";

import { ControlsPanelFileDropItemControls } from "./controls-panel-file-drop-item-controls";

describe("controls-panel FileDrop item controls", () => {
  it("renders one file's built-in settings and commits a mediaId-keyed record", () => {
    const setControlValue = vi.fn();

    render(
      <ControlsPanelFileDropItemControls
        control={{
          assetKind: "file",
          defaultValue: [],
          itemControls: {
            depth: {
              defaultValue: 0.2,
              label: "Strength",
              max: 1,
              min: 0,
              step: 0.1,
              type: "slider",
            },
            invert: {
              defaultValue: false,
              label: "Invert",
              type: "switch",
            },
            levels: {
              defaultValue: [0, 1],
              label: "Levels",
              max: 1,
              min: 0,
              step: 0.01,
              type: "rangeSlider",
            },
          },
          multiple: true,
          target: "media.bumpMaps",
          type: "fileDrop",
          variant: "collection-actions",
        }}
        index={1}
        mediaId="bump-two"
        name="Bump maps"
        setControlValue={setControlValue}
        value={[
          {
            depth: 0.4,
            invert: true,
            levels: [0.1, 0.8],
            mediaId: "bump-one",
          },
          {
            depth: 0.6,
            invert: false,
            levels: [0.2, 0.9],
            mediaId: "bump-two",
          },
        ]}
      />,
    );

    expect(screen.getByText("Strength")).toBeTruthy();
    expect(screen.getByText("Invert")).toBeTruthy();
    expect(screen.getByText("Levels")).toBeTruthy();

    fireEvent.click(
      screen.getByRole("button", { name: "Edit Strength value" }),
    );
    const editor = screen.getByRole("textbox", { name: "Strength value" });
    editor.textContent = "0.7";
    fireEvent.keyDown(editor, { key: "Enter" });

    expect(setControlValue).toHaveBeenCalledWith(
      "media.bumpMaps",
      [
        {
          depth: 0.4,
          invert: true,
          levels: [0.1, 0.8],
          mediaId: "bump-one",
        },
        {
          depth: 0.7,
          invert: false,
          levels: [0.2, 0.9],
          mediaId: "bump-two",
        },
      ],
      "Bump maps 2 Strength",
      undefined,
    );
  });
});