<script setup lang="ts">
import {
  above,
  back,
  gesture,
  OriginGestureSurface,
  originView,
  slideLeft,
  slideRight,
  useOrigin,
  type OriginContext,
} from "@native-vue-router/core-v2";
import InstanceCard from "../components/InstanceCard.vue";
import { useDemoInstance } from "../lab-state";
import SecondView from "./SecondView.vue";

const origin = useOrigin();
const identity = useDemoInstance("X");

const secondView = () =>
  originView(
    SecondView,
    {
      openedAt: new Date().toLocaleTimeString(),
      createdBy: identity.instance,
    },
    { key: "second", name: "Second" },
  );
const createSecond = () => above(secondView(), slideLeft);

const goBack = (context: OriginContext) =>
  context.canGoBack ? back(slideRight) : null;

const forwardGesture = gesture
  .to.left()
  .navigate(() => above(secondView()))
  .animate(slideLeft);
const backGesture = gesture
  .to.right()
  .navigate((context) => (context.canGoBack ? back() : null))
  .animate(slideRight);
const gestures = [forwardGesture, backGesture] as const;

function backWithButton() {
  const action = goBack(origin.context.value);
  if (action) void origin.perform(action);
}
</script>

<template>
  <OriginGestureSurface
    as="main"
    class="lab-page chain-view view-one"
    :gestures="gestures"
  >
    <button
      class="view-back"
      type="button"
      data-origin-gesture="ignore"
      @click="backWithButton"
    >
      ← Labs
    </button>
    <div class="eyebrow">Chain stress test · Origin X</div>
    <h1>Every component starts its own movement.</h1>
    <p>
      Drag this screen left. Release it, then immediately drag the blue screen
      while this spring is still settling. Keep going to build a four-node
      scene.
    </p>
    <InstanceCard
      label="X Vue instance"
      :instance="identity.instance"
      :status="identity.status.value"
    />
    <button
      class="primary-action"
      data-origin-gesture="ignore"
      type="button"
      @click="origin.perform(createSecond())"
    >
      Open Y without a gesture
    </button>
    <div class="gesture-hint">Swipe left <span>→</span></div>
    <div class="edge-marker edge-marker--left">back edge</div>
  </OriginGestureSurface>
</template>
