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

/**
 * A style-only control set that can be applied to anything: global classes, theme style entries,
 * or widgets that opt in. Selectors use {{WRAPPER}} only.
 */
export const universalSections: SectionDef[] = [
  { id: 'u_typography', label: 'Typography', tab: 'style' },
  { id: 'u_background', label: 'Background', tab: 'style' },
  { id: 'u_border', label: 'Border', tab: 'style' },
  { id: 'u_spacing', label: 'Spacing', tab: 'style' },
  { id: 'u_size', label: 'Size', tab: 'style' },
];

export const universalControls: ControlDef[] = [
  { id: 'u_color', type: 'color', label: 'Text color', tab: 'style', section: 'u_typography', responsive: true, states: ['hover'], css: [{ selector: '{{WRAPPER}}', property: 'color' }] },
  { id: 'u_typography', type: 'typography', label: 'Typography', tab: 'style', section: 'u_typography', responsive: true, css: [{ selector: '{{WRAPPER}}' }] },
  { id: 'u_text_align', type: 'choose', label: 'Align', tab: 'style', section: 'u_typography', responsive: true, options: [{ value: 'left', label: 'Left', icon: 'align-left' }, { value: 'center', label: 'Center', icon: 'align-center' }, { value: 'right', label: 'Right', icon: 'align-right' }, { value: 'justify', label: 'Justify', icon: 'align-justify' }], css: [{ selector: '{{WRAPPER}}', property: 'text-align' }] },
  { id: 'u_background', type: 'background', label: 'Background', tab: 'style', section: 'u_background', responsive: true, states: ['hover'], css: [{ selector: '{{WRAPPER}}' }] },
  { id: 'u_border', type: 'border', label: 'Border', tab: 'style', section: 'u_border', responsive: true, states: ['hover'], css: [{ selector: '{{WRAPPER}}' }] },
  { id: 'u_box_shadow', type: 'boxShadow', label: 'Box shadow', tab: 'style', section: 'u_border', states: ['hover'], css: [{ selector: '{{WRAPPER}}', property: 'box-shadow' }] },
  { id: 'u_margin', type: 'dimensions', label: 'Margin', tab: 'style', section: 'u_spacing', responsive: true, allowNegative: true, units: ['px', '%', 'em', 'rem'], css: [{ selector: '{{WRAPPER}}', property: 'margin' }] },
  { id: 'u_padding', type: 'dimensions', label: 'Padding', tab: 'style', section: 'u_spacing', responsive: true, units: ['px', '%', 'em', 'rem'], css: [{ selector: '{{WRAPPER}}', property: 'padding' }] },
  { id: 'u_width', type: 'slider', label: 'Width', tab: 'style', section: 'u_size', responsive: true, units: ['px', '%', 'vw', 'custom'], css: [{ selector: '{{WRAPPER}}', property: 'width' }] },
  { id: 'u_height', type: 'slider', label: 'Height', tab: 'style', section: 'u_size', responsive: true, units: ['px', '%', 'vh', 'custom'], css: [{ selector: '{{WRAPPER}}', property: 'height' }] },
];

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