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

import {
  installTimelinePanelTestEnvironment,
  renderTimelinePanel,
} from "./timeline-panel-test-utils";

installTimelinePanelTestEnvironment();

describe("TimelinePanel keyframes", () => {
  it("keeps the selected keyframe row highlighted", () => {
    const selectedKeyframeId = "selectedLayer.opacity::4";
    const { container } = renderTimelinePanel(
      {},
      {
        timeline: {
          expanded: true,
          keyframeGroups: [
            {
              controlId: "selectedLayer.opacity",
              keyframes: [
                {
                  controlId: "selectedLayer.opacity",
                  controlLabel: "Opacity",
                  id: selectedKeyframeId,
                  timeSeconds: 4,
                  valueLabel: "75%",
                },
              ],
              label: "Opacity",
            },
          ],
          selectedKeyframeId,
        },
      },
    );

    expect(container.querySelector('[data-slot="timeline-keyframe-row"]')?.className).toContain(
      "bg-[color:color-mix(in_oklab,var(--foreground)_3%,transparent)]",
    );
  });

  it("pauses playback when dragging a keyframe", () => {
    const keyframeId = "selectedLayer.opacity::4";
    const { container } = renderTimelinePanel(
      {},
      {
        timeline: {
          expanded: true,
          isPlaying: true,
          keyframeGroups: [
            {
              controlId: "selectedLayer.opacity",
              keyframes: [
                {
                  controlId: "selectedLayer.opacity",
                  controlLabel: "Opacity",
                  id: keyframeId,
                  timeSeconds: 4,
                  valueLabel: "75%",
                },
              ],
              label: "Opacity",
            },
          ],
        },
      },
    );
    const track = container.querySelector<HTMLElement>('[data-slot="timeline-keyframe-track"]');
    const keyframeButton = screen.getByRole("button", { name: "Opacity keyframe at 4.00s" });

    expect(track).toBeTruthy();
    expect(screen.getByTestId("timeline-playing").textContent).toBe("true");

    fireEvent.pointerDown(keyframeButton, {
      button: 0,
      clientX: 100,
      clientY: 12,
      pointerId: 1,
    });
    fireEvent.pointerMove(keyframeButton, {
      clientX: 100,
      clientY: 400,
      pointerId: 1,
    });

    expect(screen.getByTestId("timeline-playing").textContent).toBe("false");
  });
});