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) {

  let { quiz, save, responses : resp, id:index} = props;

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

  const changeA = (event) => {
    let { id, checked } = event.target
    if(parseInt( checkB ) !== parseInt(id) && checked ){
      setCheckA(parseInt( id ))
      let temp = {
        [index]: {
          A:id,
          B: resp[id]?.B ? resp[id].B : 0
        }
      }
      save(Object.assign(resp,temp))
    }
  };
  
  const changeB = (event) => {
    let { id, checked } = event.target
    if(parseInt( checkA ) !== parseInt( id ) && checked){
      setCheckB(parseInt( id ))
      let temp = {
        [index]: {
          B:id,
          A: resp[id]?.A ? resp[id].A : 0
        }
      }
      save(Object.assign(resp,temp))
    }
  };

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

      {quiz.map((value) => {
        // console.log("QUIZ VALUE: ", 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, save, responses}) {
  let { instrucciondepregunta, respuestas,id } = quiz
  let checked = index === current;
  return (
    <Fade in={checked} unmountOnExit>
      <Card className="question_form">
        <CardContent>
          <div variant="body2">
            <List>
              <CheckboxexHeader group={index + 1} title={instrucciondepregunta}/>
            </List>
            <CheckboxesGroup 
              id={id}
              quiz={respuestas} 
              save={save}
              responses={responses}
              />
          </div>
        </CardContent>
      </Card>
    </Fade>
  );
}