import { defineToolcraft } from "../../schema/define-toolcraft";
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({
    canvas: { enabled: true },
    panels: {
      controls: {
        sections: [
          {
            controls: {
              opacity: {
                defaultValue: 75,
                target: "selectedLayer.opacity",
                type: "slider",
              },
            },
          },
        ],
        title: "Controls",
      },
    },
    persistence: {
      include: ["values", "canvas", "panels", "timeline"],
      key: "toolcraft:root-test-hot:state:v1",
      storage: "localStorage",
      version: 1,
    },
  });
}

export function createValuesPersistenceSchema() {
  return defineToolcraft({
    canvas: { enabled: true },
    panels: {
      controls: {
        sections: [
          {
            controls: {
              opacity: {
                defaultValue: 75,
                target: "selectedLayer.opacity",
                type: "slider",
              },
            },
          },
        ],
        title: "Controls",
      },
    },
    persistence: {
      include: ["values", "panels"],
      key: "toolcraft:root-test-committed-values:state:v1",
      storage: "localStorage",
      version: 1,
    },
  });
}