All files / web/src/app/create/worksheets/components/config-sidebar DifficultyTab.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { stack } from '@styled/patterns'
import { defaultAdditionConfig } from '@/app/create/worksheets/config-schemas'
import { useTheme } from '@/contexts/ThemeContext'
import type { WorksheetFormState } from '../../types'
import { MasteryModePanel } from '../config-panel/MasteryModePanel'
import { ProgressiveDifficultyToggle } from '../config-panel/ProgressiveDifficultyToggle'
import { CustomModeControls } from '../config-panel/CustomModeControls'
import { DifficultyMethodSelector } from '../DifficultyMethodSelector'
import { useWorksheetConfig } from '../WorksheetConfigContext'

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

  const currentMethod = formState.mode === 'mastery' ? 'mastery' : 'custom'

  // Handler for difficulty method switching (smart vs mastery)
  const handleMethodChange = (newMethod: 'custom' | 'mastery') => {
    if (currentMethod === newMethod) {
      return
    }

    const displayRules = formState.displayRules ?? defaultAdditionConfig.displayRules

    if (newMethod === 'custom') {
      onChange({
        mode: 'custom',
        displayRules,
        difficultyProfile: 'earlyLearner',
      } as unknown as Partial<WorksheetFormState>)
    } else {
      onChange({
        mode: 'mastery',
        displayRules,
      } as unknown as Partial<WorksheetFormState>)
    }
  }

  return (
    <div data-component="difficulty-tab" className={stack({ gap: '3' })}>
      {/* Progressive Difficulty Toggle - applies to all modes */}
      <ProgressiveDifficultyToggle
        interpolate={formState.interpolate}
        onChange={(interpolate) => onChange({ interpolate })}
        isDark={isDark}
      />

      {/* Difficulty Method Selector */}
      <DifficultyMethodSelector
        currentMethod={currentMethod}
        onChange={handleMethodChange}
        isDark={isDark}
      />

      {/* Method-specific controls */}
      {currentMethod === 'custom' && (
        <CustomModeControls formState={formState} onChange={onChange} />
      )}

      {currentMethod === 'mastery' && (
        <MasteryModePanel formState={formState} onChange={onChange} isDark={isDark} />
      )}
    </div>
  )
}