1import { Box, TextField, Button, IconButton, Typography, Paper } from '@mui/material';
2import AddIcon from '@mui/icons-material/Add';
3import DeleteIcon from '@mui/icons-material/Delete';
4import type { Symbol } from '../types';
6interface FrequencyInputProps {
7 symbols: Symbol[];
8 onSymbolsChange: (symbols: Symbol[]) => void;
9}
11export default function FrequencyInput({ symbols, onSymbolsChange }: FrequencyInputProps) {
12 const handleAddSymbol = () => {
13 const nextLetter = String.fromCharCode(65 + symbols.length); // A, B, C, ...
14 const defaultColors = ['#1976d2', '#dc004e', '#9c27b0', '#f57c00', '#388e3c', '#d32f2f', '#0097a7', '#7b1fa2', '#c2185b', '#5d4037'];
15 const newSymbol: Symbol = {
16 name: nextLetter,
17 frequency: 1,
18 color: defaultColors[symbols.length % defaultColors.length],
19 };
20 onSymbolsChange([...symbols, newSymbol]);
21 };
23 const handleRemoveSymbol = (index: number) => {
24 const newSymbols = symbols.filter((_, i) => i !== index);
25 onSymbolsChange(newSymbols);
26 };
28 const handleFrequencyChange = (index: number, value: string) => {
29 const frequency = parseInt(value) || 1;
30 const newSymbols = [...symbols];
31 newSymbols[index] = { ...newSymbols[index], frequency: Math.max(1, frequency) };
32 onSymbolsChange(newSymbols);
33 };
35 const totalL = symbols.reduce((sum, s) => sum + s.frequency, 0);
37 return (
38 <Paper elevation={2} sx={{ p: 2, mb: 2 }}>
39 <Typography variant="subtitle1" gutterBottom sx={{ fontWeight: 600 }}>
40 Symbol Frequencies
41 </Typography>
42 <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
43 Configure the relative frequencies of each symbol. L = {totalL}
44 </Typography>
46 <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
47 {symbols.map((symbol, index) => (
48 <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
49 <Box
50 sx={{
51 width: 40,
52 height: 40,
53 backgroundColor: symbol.color,
54 borderRadius: 1,
55 display: 'flex',
56 alignItems: 'center',
57 justifyContent: 'center',
58 color: 'white',
59 fontWeight: 'bold',
60 }}
61 >
62 {symbol.name}
63 </Box>
64 <TextField
65 label="Frequency"
66 type="number"
67 value={symbol.frequency}
68 onChange={(e) => handleFrequencyChange(index, e.target.value)}
69 size="small"
70 inputProps={{ min: 1 }}
71 sx={{ width: 120 }}
72 />
73 <IconButton
74 onClick={() => handleRemoveSymbol(index)}
75 disabled={index !== symbols.length - 1 || symbols.length <= 1}
76 color="error"
77 size="small"
78 >
79 <DeleteIcon />
80 </IconButton>
81 </Box>
82 ))}
84 <Button
85 variant="outlined"
86 startIcon={<AddIcon />}
87 onClick={handleAddSymbol}
88 disabled={symbols.length >= 26}
89 sx={{ alignSelf: 'flex-start' }}
90 >
91 Add Symbol
92 </Button>
93 </Box>
94 </Paper>
95 );
96}