All files / web/src/app/create/worksheets/components/config-panel utils.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import type React from 'react'
import { css } from '@styled/css'

/**
 * Generate a human-readable summary of enabled scaffolding aids
 * Returns JSX with each frequency group on its own line
 * @param displayRules - Display rules to summarize
 * @param operator - Current worksheet operator (filters out irrelevant scaffolds)
 */
export function getScaffoldingSummary(
  displayRules: any,
  operator?: 'addition' | 'subtraction' | 'mixed'
): React.ReactNode {
  console.log('[getScaffoldingSummary] displayRules:', displayRules, 'operator:', operator)

  const alwaysItems: string[] = []
  const conditionalItems: string[] = []

  // Addition-specific scaffolds (skip for subtraction-only)
  if (operator !== 'subtraction') {
    if (displayRules.carryBoxes === 'always') {
      alwaysItems.push('carry boxes')
    } else if (displayRules.carryBoxes !== 'never') {
      conditionalItems.push('carry boxes')
    }

    if (displayRules.tenFrames === 'always') {
      alwaysItems.push('ten-frames')
    } else if (displayRules.tenFrames !== 'never') {
      conditionalItems.push('ten-frames')
    }
  }

  // Universal scaffolds (always show)
  if (displayRules.answerBoxes === 'always') {
    alwaysItems.push('answer boxes')
  } else if (displayRules.answerBoxes !== 'never') {
    conditionalItems.push('answer boxes')
  }

  if (displayRules.placeValueColors === 'always') {
    alwaysItems.push('place value colors')
  } else if (displayRules.placeValueColors !== 'never') {
    conditionalItems.push('place value colors')
  }

  // Subtraction-specific scaffolds (skip for addition-only)
  if (operator !== 'addition') {
    if (displayRules.borrowNotation === 'always') {
      alwaysItems.push('borrow notation')
    } else if (displayRules.borrowNotation !== 'never') {
      conditionalItems.push('borrow notation')
    }

    if (displayRules.borrowingHints === 'always') {
      alwaysItems.push('borrowing hints')
    } else if (displayRules.borrowingHints !== 'never') {
      conditionalItems.push('borrowing hints')
    }
  }

  if (alwaysItems.length === 0 && conditionalItems.length === 0) {
    console.log('[getScaffoldingSummary] Final summary: no scaffolding')
    return <span className={css({ color: 'gray.500', fontStyle: 'italic' })}>no scaffolding</span>
  }

  console.log('[getScaffoldingSummary] Final summary:', {
    alwaysItems,
    conditionalItems,
  })

  return (
    <div className={css({ display: 'flex', flexDirection: 'column', gap: '0.5' })}>
      {alwaysItems.length > 0 && <div>Always: {alwaysItems.join(', ')}</div>}
      {conditionalItems.length > 0 && <div>When needed: {conditionalItems.join(', ')}</div>}
    </div>
  )
}