<script setup lang="ts">
import {
  above,
  back,
  gesture,
  OriginGestureSurface,
  originView,
  useOrigin,
} from "@native-vue-router/core-v2";
import InstanceCard from "../components/InstanceCard.vue";
import { useDemoInstance } from "../lab-state";
import { cardFlip, rise, unfocusPortal } from "../motions";
import DirectionResultView from "./DirectionResultView.vue";

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

const eastView = () =>
  originView(
    DirectionResultView,
    {
      direction: "east",
      heading: "Horizontal declarations can own a full-page flip.",
      accent: "#38d8ff",
      createdBy: identity.instance,
    },
    { key: "direction-east", name: "East Result" },
  );
const openEast = () => above(eastView(), cardFlip);

const northView = () =>
  originView(
    DirectionResultView,
    {
      direction: "north",
      heading: "The same origin can create a completely different view upward.",
      accent: "#b9ff66",
      createdBy: identity.instance,
    },
    { key: "direction-north", name: "North Result" },
  );
const openNorth = () => above(northView(), rise);

const flipGesture = gesture.to
  .left()
  .navigate(() => above(eastView()))
  .animate(cardFlip);
const riseGesture = gesture.to
  .up()
  .navigate(() => above(northView()))
  .animate(rise);
const backGesture = gesture.from
  .left("clamp(24px, 8%, 64px)")
  .to.right()
  .navigate((context) => (context.canGoBack ? back() : null))
  .animate(unfocusPortal);
const gestures = [flipGesture, riseGesture, backGesture] as const;

function perform(action: ReturnType<typeof openEast>) {
  void origin.perform(action);
}
</script>

<template>
  <OriginGestureSurface
    as="main"
    class="lab-page direction-view"
    :gestures="gestures"
  >
    <div class="eyebrow">Lab 02 · Direction matrix</div>
    <h1>One component. Three explicit choices.</h1>
    <p>
      Swipe left for a perspective flip, swipe up for a rising cover, or use the
      left edge to go back. None of these gestures exist outside this view.
    </p>

    <div class="direction-compass">
      <button
        type="button"
        data-origin-gesture="ignore"
        class="compass-action compass-action--up"
        @click="perform(openNorth())"
      >
        <span>↑</span>
        <strong>Rise</strong>
        <small>target above</small>
      </button>
      <div class="compass-core">
        <span>origin</span>
        <strong>{{ identity.instance }}</strong>
      </div>
      <button
        type="button"
        data-origin-gesture="ignore"
        class="compass-action compass-action--left"
        @click="perform(openEast())"
      >
        <span>←</span>
        <strong>Flip left</strong>
        <small>custom perspective</small>
      </button>
    </div>

    <InstanceCard
      label="Direction view"
      :instance="identity.instance"
      :status="identity.status.value"
    />
    <div class="gesture-map">
      <span>↑ full-surface target</span>
      <span>← full-surface target</span>
      <span>left edge → history back</span>
    </div>
    <div class="edge-marker edge-marker--left">back edge</div>
  </OriginGestureSurface>
</template>
