import React from 'react';
import {
    Checkbox,
    FormControlLabel,
    Box,
    ListItem,
    List,
    Typography,
    TextField,
} from "@mui/material";


type PartProps = {
    id: number;
    name: string;
}

interface UnitProps {
    part: PartProps;
    mandatory: boolean;
    optional: boolean;
}

interface UnitsProps {
    units: UnitProps[];
    onUnitChange?: (id: number, checked: boolean) => void;
}

const SelectUnits = ({units, onUnitChange}: UnitsProps) => {
    // const [trackerName, setTrackerName] = React.useState<string>('');

    return (
        <>
            <Box>
                {/*<TextField fullWidth
                           variant="outlined"
                           label="Tracker Name"
                           placeholder="Tracker Name"
                           onChange={(event: React.ChangeEvent<HTMLInputElement>) => setTrackerName(event.target.value)}
                           value={trackerName} />*/}
                <List>
                    <ListItem sx={{p: 0}}>
                        <Typography sx={{fontWeight: 600, mt: 1}}>Mandatory</Typography>
                    </ListItem>
                    {units?.filter(unit => unit.mandatory)?.map(unit => (
                        <ListItem key={unit.part.id} sx={{padding: "5px 30px"}}>
                            <FormControlLabel
                                control={<Checkbox defaultChecked disabled/>}
                                label={unit.part.name}
                            />
                        </ListItem>
                    ))}
                    <ListItem sx={{p: 0}}>
                        <Typography sx={{fontWeight: 600, mt: 1}}>Optional</Typography>
                    </ListItem>
                    {units?.filter(unit => unit.optional).length > 0 ? (
                        units
                            .filter(unit => unit.optional)
                            .map(unit => (
                                <ListItem key={unit.part.id} sx={{ padding: "5px 30px" }}>
                                    <FormControlLabel
                                        control={
                                            <Checkbox onChange={(e: any) => onUnitChange?.(unit.part.id, e.target.checked)} />
                                        }
                                        label={unit.part.name}
                                    />
                                </ListItem>
                            ))
                    ) : (
                        <ListItem sx={{ padding: "5px 30px" }}>
                            <em>No optional units available</em>
                        </ListItem>
                    )}
                </List>
            </Box>
        </>
    );
}

export default SelectUnits;
