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

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

installTimelinePanelTestEnvironment();

describe("TimelinePanel upload-dependent playback", () => {
  it("keeps upload-dependent playback inert until source media exists", () => {
    renderUploadDependentTimelinePanel({
      timeline: {
        currentTimeSeconds: 4,
        isPlaying: true,
      },
    });

    const playButton = screen.getByRole("button", { name: "Play playback" });

    expect((playButton as HTMLButtonElement).disabled).toBe(true);
    expect(screen.getByTestId("timeline-playing").textContent).toBe("false");
    expect(screen.getByTestId("timeline-time").textContent).toBe("0");

    fireEvent.click(playButton);

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

  it("keeps upload-dependent playback available when source media exists", () => {
    renderUploadDependentTimelinePanel({
      mediaAssets: [
        {
          dataUrl: "data:image/png;base64,AAAA",
          fileName: "source.png",
          id: "media-1",
          layerId: "layer-1",
          mimeType: "image/png",
          position: { x: 0, y: 0 },
          size: { height: 320, unit: "px", width: 512 },
        },
      ],
    });

    expect(
      (screen.getByRole("button", { name: "Pause playback" }) as HTMLButtonElement)
        .disabled,
    ).toBe(false);
    expect(screen.getByTestId("timeline-playing").textContent).toBe("true");
  });
});