import { cleanup, render } from "@testing-library/react";
import * as React from "react";
import { afterEach, beforeAll, vi } from "vitest";

import { timelineModule } from "../../modules/built-ins/timeline/timeline-module";
import { mediaSourceModule } from "../../modules/built-ins/media-source/media-source-module";
import { defineToolcraft } from "../../schema/define-toolcraft";
import type { ToolcraftTimelineMode } from "../../schema/types";
import type { ToolcraftInitialState } from "../../state/types";
import { ToolcraftRoot } from "../app-shell/toolcraft-root";
import { useToolcraft } from "../app-shell/use-toolcraft";
import { TimelinePanel } from "./timeline-panel";

export function installTimelinePanelTestEnvironment() {
  beforeAll(() => {
    Object.defineProperty(window, "matchMedia", {
      value: (query: string) => ({
        addEventListener: () => undefined,
        addListener: () => undefined,
        dispatchEvent: () => false,
        matches: query === "(prefers-reduced-motion: reduce)",
        media: query,
        onchange: null,
        removeEventListener: () => undefined,
        removeListener: () => undefined,
      }),
      writable: true,
    });
  });

  afterEach(() => {
    cleanup();
    window.localStorage.clear();
    vi.restoreAllMocks();
  });
}

type TimelineTestModuleOptions = Readonly<{
  defaultDurationSeconds?: number;
  mode: ToolcraftTimelineMode;
}>;

export function createTimelineSchema(
  timeline: TimelineTestModuleOptions = { mode: "keyframes" },
) {
  return defineToolcraft({
    base: {
      identity: { id: "runtime-test", title: "Toolcraft App" },
      canvas: { enabled: true },
      panels: {},
    },
    modules: [timelineModule(timeline)],
  });
}

function TimelineStateProbe() {
  const { state } = useToolcraft();

  return (
    <>
      <span data-testid="timeline-playing">
        {String(state.timeline.isPlaying)}
      </span>
      <span data-testid="timeline-looping">
        {String(state.timeline.isLooping)}
      </span>
      <span data-testid="timeline-time">
        {String(state.timeline.currentTimeSeconds)}
      </span>
      <span data-testid="timeline-expanded">
        {String(state.timeline.expanded)}
      </span>
    </>
  );
}

export function renderTimelinePanel(
  props: Partial<React.ComponentProps<typeof TimelinePanel>> = {},
  initialState?: ToolcraftInitialState,
  timeline?: TimelineTestModuleOptions,
) {
  return render(
    <ToolcraftRoot
      initialState={initialState}
      schema={createTimelineSchema(timeline)}
    >
      <TimelinePanel framed={false} {...props} />
      <TimelineStateProbe />
    </ToolcraftRoot>,
  );
}

export function renderUploadDependentTimelinePanel(
  initialState?: ToolcraftInitialState,
) {
  const schema = defineToolcraft({
    base: {
      identity: { id: "runtime-test", title: "Toolcraft App" },
      canvas: {
        enabled: true,
        sizing: { mode: "intrinsic-media" },
        upload: true,
      },
      panels: {},
    },
    modules: [
      mediaSourceModule(),
      timelineModule({
        mode: "playback",
      }),
    ],
  });

  return render(
    <ToolcraftRoot initialState={initialState} schema={schema}>
      <TimelinePanel framed={false} />
      <TimelineStateProbe />
    </ToolcraftRoot>,
  );
}