import * as React from 'react';

import { Remove as RemoveIcon, Add as AddIcon } from '@mui/icons-material';
import {
  Card,CardContent,Avatar,Checkbox,List,Tooltip,Fade,
  ListItem,ListItemButton,ListItemIcon,ListItemText,
} from '@mui/material'
import { deepPurple } from '@mui/material/colors';

function CheckboxexHeader(prop) {
  return (
    <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
      <ListItem>
        <Avatar sx={{ bgcolor: deepPurple[500] }}>{prop.group}</Avatar>
        <ListItemButton role={undefined} dense>
          <ListItemText style={{marginRight :25, color:'silver'}} primary={prop.title} />
          <ListItemIcon>
            <AddIcon />
          </ListItemIcon>
          <ListItemIcon>
            <RemoveIcon />
          </ListItemIcon>
        </ListItemButton>
      </ListItem>
    </List>
  );
}

function CheckboxesGroup(props) {

  const [checkA, setCheckA] = React.useState(0);
  const [checkB, setCheckB] = React.useState(0);


  const changeA = (event) => {
    let { id } = event.target
    if(parseInt( checkB ) !== parseInt(id) ){
      setCheckA(parseInt( id ))
    }
  };
  
  const changeB = (event) => {
    let { id } = event.target
    if(parseInt( checkA ) !== parseInt( id )){
      setCheckB(parseInt( id ))
    }
  };

  return (
    <List sx={{ width: '100%', bgcolor: 'background.paper' }}>

      {props.quiz.map((value) => {

        const labelId = `checkbox-list-label-${value.id}`;

        return (
          <ListItem key={value.id}>
            <ListItemButton dense>
              <Tooltip title={value.decription} placement="top-start" arrow>
                <ListItemText 
                  sx={{ 
                    '& .MuiTypography-root' : {
                      fontWeight:'bold'
                  }}} 
                  className="checkbox_label_question" 
                  id={labelId} 
                  primary={value.nombre} 
                 />
              </Tooltip>

              <ListItemIcon>
                <Checkbox
                  id={value.id.toString()}
                  sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
                  color="error"
                  edge="start"
                  disableRipple
                  inputProps={{ 'aria-labelledby': value.id }}
                  checked={parseInt( checkA ) === parseInt( value.id )}
                  onChange={changeA}
                />
              </ListItemIcon>
              <ListItemIcon>
                <Checkbox
                  id={value.id.toString()}
                  sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
                  color="error"
                  edge="start"
                  disableRipple
                  inputProps={{ 'aria-labelledby': value.id }}
                  checked={parseInt( checkB ) === parseInt( value.id )}
                  onChange={changeB}
                />
              </ListItemIcon>
            </ListItemButton>
          </ListItem>
        );
      })}
    </List>
  );
}

export function Question({quiz, index, current}) {
  let { instrucciondepregunta, respuestas} = quiz
  let checked = index === current;
  return (
    <Fade in={checked} unmountOnExit>
      <Card className="question_form">
        <CardContent>
          <div variant="body2">
            <List>
              <CheckboxexHeader  group={index} title={instrucciondepregunta}/>
            </List>
            <CheckboxesGroup quiz={respuestas} />
          </div>
        </CardContent>
      </Card>
    </Fade>
  );
}