All files / web/src/app/create/worksheets/components/config-sidebar LayoutTab.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { defaultAdditionConfig } from '@/app/create/worksheets/config-schemas'
import { useTheme } from '@/contexts/ThemeContext'
import type { DisplayRules } from '../../displayRules'
import { calculateDerivedState } from '../../utils/layoutCalculations'
import { OrientationPanel } from '../OrientationPanel'
import { useWorksheetConfig } from '../WorksheetConfigContext'

export function LayoutTab() {
  const { formState, onChange } = useWorksheetConfig()
  const { resolvedTheme } = useTheme()
  const isDark = resolvedTheme === 'dark'

  console.log('[LayoutTab] Current formState.displayRules:', formState.displayRules)

  // Orientation change handler with automatic problemsPerPage/cols updates
  const handleOrientationChange = (
    orientation: 'portrait' | 'landscape',
    problemsPerPage: number,
    cols: number
  ) => {
    const pages = formState.pages || 1
    const { rows, total } = calculateDerivedState(problemsPerPage, pages, cols)
    onChange({
      orientation,
      problemsPerPage,
      cols,
      pages,
      rows,
      total,
    })
  }

  // Problems per page change handler with automatic cols update
  const handleProblemsPerPageChange = (problemsPerPage: number, cols: number) => {
    const pages = formState.pages || 1
    const { rows, total } = calculateDerivedState(problemsPerPage, pages, cols)
    onChange({
      problemsPerPage,
      cols,
      pages,
      rows,
      total,
    })
  }

  // Pages change handler with derived state calculation
  const handlePagesChange = (pages: number) => {
    const problemsPerPage = formState.problemsPerPage || 15
    const cols = formState.cols || 3
    const { rows, total } = calculateDerivedState(problemsPerPage, pages, cols)
    onChange({
      pages,
      rows,
      total,
    })
  }

  return (
    <OrientationPanel
      orientation={formState.orientation || 'portrait'}
      problemsPerPage={formState.problemsPerPage || 15}
      pages={formState.pages || 1}
      cols={formState.cols || 3}
      onOrientationChange={handleOrientationChange}
      onProblemsPerPageChange={handleProblemsPerPageChange}
      onPagesChange={handlePagesChange}
      isDark={isDark}
      // Pass config for problem space validation
      digitRange={formState.digitRange || { min: 2, max: 2 }}
      pAnyStart={formState.pAnyStart ?? 0}
      operator={formState.operator || 'addition'}
      mode={formState.mode === 'mastery' ? 'mastery' : 'custom'}
      problemNumbers={
        ((formState.displayRules ?? defaultAdditionConfig.displayRules).problemNumbers as
          | 'always'
          | 'never') || 'always'
      }
      cellBorders={
        ((formState.displayRules ?? defaultAdditionConfig.displayRules).cellBorders as
          | 'always'
          | 'never') || 'always'
      }
      onProblemNumbersChange={(value) => {
        const displayRules: DisplayRules =
          formState.displayRules ?? defaultAdditionConfig.displayRules
        console.log('[LayoutTab] Changing problemNumbers:', {
          from: displayRules.problemNumbers,
          to: value,
          mode: formState.mode,
          operator: formState.operator,
          fullDisplayRules: displayRules,
        })

        // Update general displayRules
        const updates: any = {
          displayRules: {
            ...displayRules,
            problemNumbers: value,
          },
        }

        // CRITICAL: In mastery+mixed mode, also update operator-specific display rules
        if (formState.mode === 'mastery' && formState.operator === 'mixed') {
          // Update additionDisplayRules if they exist
          if (formState.additionDisplayRules) {
            updates.additionDisplayRules = {
              ...formState.additionDisplayRules,
              problemNumbers: value,
            }
          }
          // Update subtractionDisplayRules if they exist
          if (formState.subtractionDisplayRules) {
            updates.subtractionDisplayRules = {
              ...formState.subtractionDisplayRules,
              problemNumbers: value,
            }
          }
        }

        onChange(updates)
      }}
      onCellBordersChange={(value) => {
        const displayRules: DisplayRules =
          formState.displayRules ?? defaultAdditionConfig.displayRules
        console.log('[LayoutTab] Changing cellBorders:', {
          from: displayRules.cellBorders,
          to: value,
          mode: formState.mode,
          operator: formState.operator,
          fullDisplayRules: displayRules,
        })

        // Update general displayRules
        const updates: any = {
          displayRules: {
            ...displayRules,
            cellBorders: value,
          },
        }

        // CRITICAL: In mastery+mixed mode, also update operator-specific display rules
        if (formState.mode === 'mastery' && formState.operator === 'mixed') {
          // Update additionDisplayRules if they exist
          if (formState.additionDisplayRules) {
            updates.additionDisplayRules = {
              ...formState.additionDisplayRules,
              cellBorders: value,
            }
          }
          // Update subtractionDisplayRules if they exist
          if (formState.subtractionDisplayRules) {
            updates.subtractionDisplayRules = {
              ...formState.subtractionDisplayRules,
              cellBorders: value,
            }
          }
        }

        onChange(updates)
      }}
      includeAnswerKey={formState.includeAnswerKey ?? false}
      onIncludeAnswerKeyChange={(value) => {
        console.log('[LayoutTab] Changing includeAnswerKey:', {
          from: formState.includeAnswerKey,
          to: value,
        })
        onChange({ includeAnswerKey: value })
      }}
      includeQRCode={formState.includeQRCode ?? false}
      onIncludeQRCodeChange={(value) => {
        console.log('[LayoutTab] Changing includeQRCode:', {
          from: formState.includeQRCode,
          to: value,
        })
        onChange({ includeQRCode: value })
      }}
    />
  )
}