import { style } from '@vanilla-extract/css';
import { color } from 'folds';

// Pager root. Sits inside the authed shell's row-flex slot
// (ClientLayout → Box grow=Yes), so `flex: 1 1 0` fills the slot
// horizontally; `align-items: stretch` on the parent fills vertically.
//
// `touch-action: pan-y` lets the browser keep doing native vertical
// scroll (DM list virtualizer, curtain peek pull-down) without us
// having to call preventDefault on every move — only the pager's own
// listener calls preventDefault, and only after axis-resolve commits
// to "horizontal".
//
// `SurfaceVariant.Container` backdrop intentionally shows through
// (a) the inter-pane gap during a swipe — the gap colour the user
// asked for is "light blue same as the header", which IS this
// SurfaceVariant tone — and (b) any sub-pixel rounding seam at rest.
//
// `color: Background.OnContainer` mirrors what the route-level
// `<PageRoot>` would have set via its `ContainerColor({ variant:
// 'Background' })` wrapper. We mount Direct/Channels/Bots directly
// here, bypassing PageRoot for the swipe-pager experience, so without
// this declaration the form labels rendered inside the per-pane
// StreamHeader curtain (`<Text size="L400">` for Username/Server/
// Options) had `color: inherit` cascading all the way up to `body`,
// which sets no color → browser default black. The labels became
// invisible against the dark form background only on native (where the
// pager activates). Desktop / web go through PageRoot and inherit the
// expected light tone for free.
export const pagerRoot = style({
  position: 'relative',
  flex: '1 1 0',
  minWidth: 0,
  minHeight: 0,
  height: '100%',
  overflow: 'hidden',
  touchAction: 'pan-y',
  backgroundColor: color.SurfaceVariant.Container,
  color: color.Background.OnContainer,
});

// Shared static tabs row painted ABOVE the strip. Reserves the
// status-bar safe-area inset via padding-top so the segments + icons
// sit just below the system status bar, and so the backdrop colour
// extends through the inset zone (matching the per-pane PageNav's
// own `paddingTop: var(--vojo-safe-top)` so there's no visible band
// boundary at the inset edge).
//
// `z-index: 10` keeps this above the strip and any in-pane curtain
// (curtain is `z-index: 2` within its pane's stacking context, which
// in turn lives inside the strip with z-index auto = 0 in pagerRoot's
// context — so 10 reliably wins).
export const pagerStaticHeader = style({
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  zIndex: 10,
  paddingTop: 'var(--vojo-safe-top, 0px)',
  // The wrapped tabsRow has its own height of TABS_ROW_PX via the
  // stream-header recipe; we don't set a fixed height here so the
  // status-bar inset adds on top naturally.
  backgroundColor: color.SurfaceVariant.Container,
});

// Horizontal strip carrying all three panes side-by-side. Width &
// transform are computed inline in the JSX (they depend on tabs.length
// and visualIdx + visualDragPx, and the gap math couples to them).
//
// `gap: PANE_GAP_PX` is what makes the inter-pane void visible during
// a swipe — the pagerRoot's SurfaceVariant.Container colour shows
// through the gap, matching the static header tone exactly.
export const strip = style({
  display: 'flex',
  flexDirection: 'row',
  height: '100%',
  willChange: 'transform',
});

// Each pane is exactly one viewport wide. CRITICALLY `display: flex;
// flex-direction: row` so the nested Folds PageNav (which is a flex
// child with `flex-grow: 1` on mobile to override its 256px recipe
// width) expands to fill the pane. A column-flex parent here would
// leave PageNav at 256px — the bug that ate the previous attempt.
//
// No paddingTop here: the per-pane StreamHeader still renders its
// own tabs row (kept for the curtain's TABS_ROW_PX snap math, just
// painted invisible via visibility:hidden), and PageNav's inner
// column reserves the status-bar safe-area inset via its own
// `paddingTop: var(--vojo-safe-top)`. The static header overlay at
// the pager root simply paints OVER the same screen zone, so the
// underlying geometry stays identical to non-pager mode.
export const pane = style({
  display: 'flex',
  flexDirection: 'row',
  flexShrink: 0,
  width: '100vw',
  height: '100%',
  minWidth: 0,
});