import React from 'react';
import { Box, Typography } from '@mui/material';

interface UnipuckProps {
    pucks: number;  // Number of pucks
    samples?: string[][];  // Array of sample arrays for each puck
}

const Unipuck: React.FC<UnipuckProps> = ({ pucks, samples }) => {
    const renderPuck = (sampleStatus: string[]) => {
        sampleStatus = sampleStatus || Array(16).fill('empty'); // Ensure no null status array
        return (
            <svg width="100" height="100" viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="45" stroke="black" strokeWidth="2" fill="none" />
                {[...Array(11)].map((_, index) => {
                    const angle = (index * (360 / 11)) * (Math.PI / 180);
                    const x = 50 + 35 * Math.cos(angle);
                    const y = 50 + 35 * Math.sin(angle);
                    return <circle key={index} cx={x} cy={y} r="5" fill={sampleStatus[index] === 'filled' ? 'black' : 'none'} stroke="black" />;
                })}
                {[...Array(5)].map((_, index) => {
                    const angle = (index * (360 / 5) + 36) * (Math.PI / 180);
                    const x = 50 + 15 * Math.cos(angle);
                    const y = 50 + 15 * Math.sin(angle);
                    return <circle key={index + 11} cx={x} cy={y} r="5" fill={sampleStatus[index + 11] === 'filled' ? 'black' : 'none'} stroke="black" />;
                })}
            </svg>
        );
    };

    if (pucks === 0) {
        return <Typography variant="body1">No pucks attached to the dewar.</Typography>;
    }

    return (
        <Box sx={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 2 }}>
            {[...Array(pucks)].map((_, index) => (
                <Box key={index} sx={{ margin: 1 }}>
                    {renderPuck(samples && samples[index] ? samples[index] : Array(16).fill('empty'))}
                </Box>
            ))}
        </Box>
    );
};

export default Unipuck;