All files / web/src/app/create/worksheets/components/worksheet-preview WorksheetPreviewContext.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { createContext, type ReactNode, useContext, useEffect, useState } from 'react'
import type { WorksheetFormState } from '@/app/create/worksheets/types'
import { validateProblemSpace } from '@/app/create/worksheets/utils/validateProblemSpace'
import { useTheme } from '@/contexts/ThemeContext'

interface WorksheetPreviewContextValue {
  // Theme
  isDark: boolean

  // Warnings
  warnings: string[]
  isDismissed: boolean
  setIsDismissed: (dismissed: boolean) => void

  // Form state
  formState: WorksheetFormState
}

const WorksheetPreviewContext = createContext<WorksheetPreviewContextValue | null>(null)

export function useWorksheetPreview() {
  const context = useContext(WorksheetPreviewContext)
  if (!context) {
    throw new Error('useWorksheetPreview must be used within WorksheetPreviewProvider')
  }
  return context
}

interface WorksheetPreviewProviderProps {
  formState: WorksheetFormState
  children: ReactNode
}

export function WorksheetPreviewProvider({ formState, children }: WorksheetPreviewProviderProps) {
  const { resolvedTheme } = useTheme()
  const isDark = resolvedTheme === 'dark'
  const [isDismissed, setIsDismissed] = useState(false)
  const [warnings, setWarnings] = useState<string[]>([])

  // Validate problem space whenever relevant config changes
  useEffect(() => {
    const problemsPerPage = formState.problemsPerPage ?? 20
    const pages = formState.pages ?? 1
    const operator = formState.operator ?? 'addition'
    const mode = formState.mode ?? 'custom'

    // Reset dismissed state when config changes
    setIsDismissed(false)

    // Skip validation for mastery+mixed mode - too complex with separate skill configs
    if (mode === 'mastery' && operator === 'mixed') {
      setWarnings([])
      return
    }

    const digitRange = formState.digitRange ?? { min: 2, max: 2 }
    const pAnyStart = formState.pAnyStart ?? 0

    const validation = validateProblemSpace(problemsPerPage, pages, digitRange, pAnyStart, operator)

    setWarnings(validation.warnings)
  }, [
    formState.problemsPerPage,
    formState.pages,
    formState.digitRange,
    formState.pAnyStart,
    formState.operator,
    formState.mode,
  ])

  const value: WorksheetPreviewContextValue = {
    isDark,
    warnings,
    isDismissed,
    setIsDismissed,
    formState,
  }

  return (
    <WorksheetPreviewContext.Provider value={value}>{children}</WorksheetPreviewContext.Provider>
  )
}