import { defineToolcraft } from "../../schema/define-toolcraft";
import { timelineModule } from "../../modules/built-ins/timeline/timeline-module";
import type { ToolcraftExternalStore } from "../../state/toolcraft-external-store";
import { useToolcraftStore } from "./toolcraft-store-context";

export function StorePersistenceProbe() {
  const store = useToolcraftStore();

  return (
    <div>
      <button
        type="button"
        onClick={() =>
          store.dispatchTransient({
            currentTimeSeconds: 2,
            type: "timeline.setCurrentTime",
          })
        }
      >
        Scrub timeline
      </button>
      <button
        type="button"
        onClick={() =>
          store.dispatchTransient({
            offset: { x: 24, y: -12 },
            type: "canvas.setViewport",
            zoom: 150,
          })
        }
      >
        Move viewport
      </button>
      <button
        type="button"
        onClick={() =>
          store.dispatch({
            target: "selectedLayer.opacity",
            type: "controls.setValue",
            value: 50,
          })
        }
      >
        Set persisted value
      </button>
      <button
        type="button"
        onClick={() =>
          store.dispatch({
            size: { height: 480, unit: "px", width: 640 },
            type: "canvas.setSize",
          })
        }
      >
        Resize canvas
      </button>
      <button
        type="button"
        onClick={() =>
          store.dispatch({
            expanded: true,
            type: "timeline.setExpanded",
          })
        }
      >
        Expand non-persisted timeline
      </button>
      <button type="button" onClick={() => store.commitTransient("playback")}>
        Commit playback
      </button>
      <button
        type="button"
        onClick={() =>
          store.dispatch({
            controlId: "selectedLayer.opacity",
            controlLabel: "Opacity",
            type: "timeline.upsertControlKeyframe",
            value: 50,
            valueLabel: "50",
          })
        }
      >
        Set keyframe
      </button>
      <button
        type="button"
        onClick={() => store.dispatch({ type: "history.undo" })}
      >
        Undo
      </button>
      <button
        type="button"
        onClick={() => store.dispatch({ type: "history.redo" })}
      >
        Redo
      </button>
    </div>
  );
}

export function CaptureStore({
  capture,
}: {
  capture: (store: ToolcraftExternalStore) => void;
}) {
  capture(useToolcraftStore());
  return null;
}

export function createHotPersistenceSchema() {
  return defineToolcraft({
    base: {
      identity: { id: "root-test-hot", title: "Root Test Hot" },
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              id: "test-section-1",
              controls: {
                opacity: {
                  applicability: { mode: "always" as const },
                  defaultValue: 75,
                  target: "selectedLayer.opacity",
                  type: "slider",
                },
              },
            },
          ],
          title: "Controls",
        },
      },
      persistence: {
        storage: "localStorage",
      },
    },
    modules: [timelineModule({ mode: "keyframes" })],
  });
}

export function createValuesPersistenceSchema() {
  return defineToolcraft({
    base: {
      identity: {
        id: "root-test-committed-values",
        title: "Root Test Committed Values",
      },
      canvas: { enabled: true },
      panels: {
        controls: {
          sections: [
            {
              id: "test-section-2",
              controls: {
                opacity: {
                  applicability: { mode: "always" as const },
                  defaultValue: 75,
                  target: "selectedLayer.opacity",
                  type: "slider",
                },
              },
            },
          ],
          title: "Controls",
        },
      },
      persistence: {
        storage: "localStorage",
      },
    },
    modules: [],
  });
}