import { EditorView } from '@codemirror/view';
import { Compartment } from '@codemirror/state';

// Salon-themed CodeMirror look. Static — defined once at module load.
export const salonTheme = EditorView.theme(
  {
    '&': {
      backgroundColor: 'var(--base)',
      color: 'var(--text)',
      border: '1px solid var(--surface2)',
      borderRadius: '2px',
      fontSize: '14px',
      boxShadow: 'inset 0 0 0 1px color-mix(in srgb, var(--surface1) 40%, transparent)',
    },
    '.cm-content': {
      fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
      padding: '1rem',
      caretColor: 'var(--mauve)',
      color: 'var(--text)',
    },
    '.cm-cursor': { borderLeftColor: 'var(--mauve)', borderLeftWidth: '2px' },
    '.cm-selectionBackground': {
      backgroundColor: 'color-mix(in srgb, var(--mauve) 25%, transparent) !important',
    },
    '&.cm-focused .cm-selectionBackground': {
      backgroundColor: 'color-mix(in srgb, var(--mauve) 30%, transparent) !important',
    },
    '.cm-activeLine': { backgroundColor: 'color-mix(in srgb, var(--surface0) 55%, transparent)' },
    '.cm-gutters': {
      backgroundColor: 'var(--surface0)',
      color: 'var(--subtext0)',
      border: 'none',
      borderRight: '1px solid var(--surface2)',
      fontFamily: 'var(--font-display)',
      fontStyle: 'italic',
    },
    '.cm-activeLineGutter': {
      backgroundColor: 'color-mix(in srgb, var(--mauve) 12%, transparent)',
      color: 'var(--mauve)',
    },
    '.cm-panels': {
      backgroundColor: 'var(--surface0)',
      color: 'var(--text)',
      borderTop: '1px solid var(--surface2)',
    },
    '.cm-searchMatch': { backgroundColor: 'color-mix(in srgb, var(--yellow) 45%, transparent)' },
    '.cm-searchMatch-selected': {
      backgroundColor: 'color-mix(in srgb, var(--peach) 55%, transparent)',
    },
    '.cm-fat-cursor': {
      backgroundColor: 'var(--mauve) !important',
      color: 'var(--rosewater) !important',
    },
    '&:not(.cm-focused) .cm-fat-cursor': {
      outline: '1px solid var(--mauve)',
      backgroundColor: 'transparent !important',
    },
  },
  { dark: false },
);

// Compartment for hot-swapping vim mode without recreating the editor.
export const vimCompartment = new Compartment();

export function clientSlugify(s: string): string {
  return s
    .toLowerCase()
    .normalize('NFD')
    .replace(/[̀-ͯ]/g, '')
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '');
}