import { globalStyle, style } from '@vanilla-extract/css';
import { color, toRem } from 'folds';
import { VOJO_HORSESHOE_RADIUS_PX } from '../../styles/horseshoe';
import { PAGER_EASING, PAGER_TRANSITION_MS } from './geometry';
import { tabsHost } from '../mobile-tabs-pager/style.css';

// The sliding chat lives in this overlay, painted ABOVE the persistent
// listing pager (the base layer) inside `tabsHost`. Full-bleed, no padding:
// the chat owns its own safe-top via its wrapping horseshoe and the base
// pager owns its insets — adding env(safe-area-inset-bottom) here would
// double-lift (see global.css.ts).
export const overlayRoot = style({
  position: 'absolute',
  inset: 0,
  zIndex: 1,
  overflow: 'hidden',
});

// The sliding chat card — a "shutter" over the STATIC listing behind it.
// Driven by `--swipe-x` (written to `tabsHost` by SwipeBackOverlay on every
// touchmove, inherited down here — no React re-render of the heavy chat
// subtree). The base list does NOT move or dim: dragging this card right
// simply reveals the static screen underneath.
//
// `display: flex` is load-bearing: the chat route mounts `PageRoot` → an
// outer `<Box grow="Yes">` (a flex child that needs a flex parent to fill).
// Without it the whole chat (Room timeline + composer) collapses to zero
// height and renders as an empty black screen on DM / channel chats.
export const card = style({
  position: 'absolute',
  inset: 0,
  display: 'flex',
  overflow: 'hidden',
  transform: 'translate3d(var(--swipe-x, 0px), 0, 0)',
  willChange: 'transform',
  // `pan-y` (same as the tab pager's pagerRoot) reserves HORIZONTAL panning
  // for our JS gesture: the browser keeps vertical scroll (timeline,
  // composer) but never composite-scrolls horizontally, so our touchmoves
  // stay cancelable EVERYWHERE on the card — the swipe engages across the
  // whole screen, not just over non-scrollable spots. (With `auto`, Chrome
  // optimistically composites the timeline's scroll and marks those moves
  // non-cancelable, which is why the gesture previously only worked off a
  // non-scrolling sliver.) Trade-off: a horizontally-overflowing code block
  // (`Scroll direction="Both"`) can't be touch-panned sideways while inside a
  // `pan-y` ancestor — an accepted, rare cost for a reliable back-swipe.
  touchAction: 'pan-y',
  backgroundColor: color.SurfaceVariant.Container,
  // Square at rest (covering the viewport), so no base slivers show in the
  // corners. Leading-edge rounding is added only WHILE dragging (below) —
  // toggled by an attribute, not ramped per-frame, to avoid a clip repaint
  // on every touchmove of the heavy chat layer.
  borderRadius: 0,
  // Soft shadow on the leading edge so the shutter reads as lifted off the
  // static screen behind it.
  boxShadow: '-8px 0 24px rgba(0, 0, 0, 0.35)',
});

// While actively dragging: follow the finger 1:1 (no transition) and round
// the leading (left) corners so the chat reads as a rounded shutter pulled
// off the static screen behind it («если экран скруглён, то и уезжающий
// скруглён»). The trailing edge stays square against the viewport edge.
globalStyle(`.${tabsHost}[data-swipe-dragging="true"] .${card}`, {
  transition: 'none',
  borderTopLeftRadius: toRem(VOJO_HORSESHOE_RADIUS_PX),
  borderBottomLeftRadius: toRem(VOJO_HORSESHOE_RADIUS_PX),
});
// On release / commit: animate the shutter home or off-screen. Same
// curve/duration as the tab pager + curtain so all motion feels consistent.
globalStyle(`.${tabsHost}:not([data-swipe-dragging="true"]) .${card}`, {
  transition: `transform ${PAGER_TRANSITION_MS}ms ${PAGER_EASING}`,
});
