<script setup lang="ts">
import {
  OriginGestureSurface,
  back,
  forward,
  gesture,
  originView,
  slideRight,
  useOrigin,
} from "@native-vue-router/core-v2";
import InstanceCard from "../components/InstanceCard.vue";
import { useDemoInstance } from "../lab-state";
import { partialDrawerOpen } from "../motions";
import PartialDrawerView from "./PartialDrawerView.vue";

const origin = useOrigin();
const identity = useDemoInstance("Drawer page");

const drawerView = () =>
  originView(
    PartialDrawerView,
    { openedFrom: identity.instance },
    { key: "partial-drawer", name: "Two-thirds Drawer" },
  );

const openDrawerGesture = gesture.from
  .left("clamp(32px, 10%, 88px)")
  .to.right()
  .navigate(() => forward(drawerView()))
  .animate(partialDrawerOpen);

const gestures = [openDrawerGesture] as const;

function openDrawer() {
  void origin.perform(forward(drawerView(), partialDrawerOpen));
}

function returnToLabs() {
  if (origin.context.value.canGoBack) void origin.perform(back(slideRight));
}
</script>

<template>
  <OriginGestureSurface
    as="main"
    class="partial-origin-view"
    :gestures="gestures"
  >
    <!--
      This rail is the left third of the full page. Once the whole page moves
      right by 2/3, this exact live DOM remains visible in the final third.
    -->
    <aside class="partial-origin-rail">
      <div class="partial-brand">OV</div>
      <nav aria-label="Example navigation">
        <button type="button" data-origin-gesture="ignore">Inbox</button>
        <button type="button" data-origin-gesture="ignore">Projects</button>
        <button type="button" data-origin-gesture="ignore">Archive</button>
      </nav>
      <InstanceCard
        label="Page instance"
        :instance="identity.instance"
        :status="identity.status.value"
      />
    </aside>

    <section class="partial-origin-content">
      <header>
        <button
          type="button"
          data-origin-gesture="ignore"
          aria-label="Return to labs"
          @click="returnToLabs"
        >
          ← Labs
        </button>
        <span>Connected presentation</span>
      </header>

      <div class="partial-origin-copy">
        <div class="eyebrow">Partial route lab</div>
        <h1>Keep one third of this page on screen.</h1>
        <p>
          Drag right from the left edge. The drawer becomes a real history
          entry, while this same mounted page remains translated and visible.
        </p>
        <button
          class="primary-action"
          type="button"
          data-origin-gesture="ignore"
          @click="openDrawer"
        >
          Open two-thirds drawer
        </button>
        <div class="gesture-hint"><span>→</span> Pull from the left edge</div>
      </div>
    </section>
  </OriginGestureSurface>
</template>
