import type { ControlDef, SectionDef } from './types';

/**
 * Page-level settings (document store `pageSettings`). Rendered by panels/PagePanel.vue and turned
 * into CSS by `useDocumentStore().pageCss()` with the wrapper `.zadex-<postId>`; the frontend prints
 * that CSS next to the document CSS. Selectors avoid `>` because the stored CSS passes through kses.
 */
const TOP_LEVEL = '{{WRAPPER}} .zx-container:not(.zx-container .zx-container)';

export const pageSections: SectionDef[] = [
  { id: 'p_layout', label: 'Layout', tab: 'content' },
  { id: 'p_scroll', label: 'Scrolling', tab: 'content' },
];

/** Values of the "Page layout" select: '' (theme default) or a Zadex page template file (includes/Frontend/Templates.php). */
export const PAGE_TEMPLATE_OPTIONS = [
  { value: '', label: 'Default (theme layout)' },
  { value: 'zadex-canvas.php', label: 'Zadex Canvas' },
  { value: 'zadex-full-width.php', label: 'Zadex Full Width' },
];

export const pageControls: ControlDef[] = [
  // Layout: not CSS, these are read by PHP (page template meta / body class) and by the canvas (src/editor/canvas/pageLayout.ts).
  {
    id: 'page_template',
    type: 'select',
    label: 'Page layout',
    tab: 'content',
    section: 'p_layout',
    default: '',
    optionsFrom: 'templates',
    options: PAGE_TEMPLATE_OPTIONS,
    labelBlock: true,
    description: 'Canvas: blank page, no theme header/footer. Full Width: theme header/footer, content spans the full width.',
  },
  {
    id: 'hide_title',
    type: 'switch',
    label: 'Hide page title',
    tab: 'content',
    section: 'p_layout',
    default: false,
    description: 'Hides the title the theme prints above the content.',
  },
  {
    id: 'scroll_snap',
    type: 'switch',
    label: 'Scroll snap',
    tab: 'content',
    section: 'p_scroll',
    responsive: true,
    default: false,
    description: 'Snaps the viewport to the top-level containers. Can be enabled per device.',
    css: [
      { selector: 'html', property: 'scroll-snap-type', value: 'y mandatory', valueOff: 'none' },
      { selector: TOP_LEVEL, property: 'scroll-snap-align', value: 'start', valueOff: 'none' },
    ],
  },
  {
    id: 'scroll_snap_align',
    type: 'select',
    label: 'Snap to',
    tab: 'content',
    section: 'p_scroll',
    default: 'start',
    condition: { scroll_snap: true },
    options: [
      { value: 'start', label: 'Top' },
      { value: 'center', label: 'Center' },
      { value: 'end', label: 'Bottom' },
    ],
    css: [{ selector: TOP_LEVEL, property: 'scroll-snap-align' }],
  },
  {
    id: 'scroll_snap_stop',
    type: 'switch',
    label: 'Stop at every container',
    tab: 'content',
    section: 'p_scroll',
    default: false,
    condition: { scroll_snap: true },
    css: [{ selector: TOP_LEVEL, property: 'scroll-snap-stop', value: 'always', valueOff: 'normal' }],
  },
  {
    id: 'scroll_smooth',
    type: 'switch',
    label: 'Smooth scrolling',
    tab: 'content',
    section: 'p_scroll',
    default: false,
    css: [{ selector: 'html', property: 'scroll-behavior', value: 'smooth', valueOff: 'auto' }],
  },
];

let cache: Record<string, ControlDef> | null = null;
export function pageControlsById(): Record<string, ControlDef> {
  if (!cache) {
    cache = {};
    for (const c of pageControls) cache[c.id] = c;
  }
  return cache;
}