/**Step 8 */
// al menos un beneficiario


function Beneficiaries({beneficiariesList, onBeneficiariesListChange}) {
    const [openCreateDialog, setOpenCreateDialog] = React.useState(false)
    const styles = {
        tableCell: {
            padding: '4px 24px',
        },
        button: {
            marginTop: '20px',
            float: 'right'
        },
        icon: {
            fontSize: '20px',
            marginLeft: '5px',
            paddingBottom: '2px',
        },
        buttonAdd: {
            float: 'right',
        },
        buttonGiveMoney: {
            marginTop: '5px',
        }
    }
    const headers = [
      'Nombre',
      'Parentesco',
      'Porcentaje',
      'Direccion'
    ]

    function handleDelete(element, index) {
      beneficiariesList.splice(index, 1)
      onBeneficiariesListChange([...beneficiariesList])
    }
    return(
        <Fragment>
          <Fragment>
            <Grid container spacing={24}>
              <Grid item style={{ padding: '24px 10px' }} xs={12}>
                <Divider />
              </Grid>
            </Grid>
            <Grid container spacing={24}>
              <Grid item xs={12}>
                <Paper>
                  <Toolbar>
                    <Grid container spacing={24}>
                      <Grid item xs={6}>
                        <Typography variant="h6">
                          Beneficiarios
                        </Typography>
                      </Grid>
                      <Grid item xs={6}>
                          <Button color="primary" style={styles.buttonAdd} onClick={() => setOpenCreateDialog(true)} >
                            AGREGAR
                            
                          </Button>
                      </Grid>
                    </Grid>
                  </Toolbar>
                    <Table>
                      <TableHead>
                        <TableRow>
                          {
                            headers.map((header, index) => 
                              <TableCell key={index}>
                                {header}
                              </TableCell>
                            )
                          }
                          <TableCell>
                            Acciones
                          </TableCell>
                        </TableRow>
                      </TableHead>
                      <TableBody>
                        {
                          beneficiariesList.length > 0 ?
                            beneficiariesList.map((item, index) =>
                              <TableRow key={index}>
                                <TableCell style={styles.tableCell}>
                                  {item.name}
                                </TableCell>
                                <TableCell style={styles.tableCell}>
                                  {item.parenthood}
                                </TableCell>
                                <TableCell style={styles.tableCell}>
                                  {item.percent}
                                </TableCell>
                                <TableCell style={styles.tableCell}>
                                  {item.address}
                                </TableCell>
                                <TableCell style={styles.tableCell}>
                                  <IconButton onClick={ev => handleDelete(item, index)}>
                                    <Icon color="error">delete</Icon>
                                  </IconButton>
                                </TableCell>
                              </TableRow>
                            )
                              :
                              <TableRow>
                                <TableCell align="center" colSpan={5}>
                                  No se han ingresado beneficiarios.
                                </TableCell>
                              </TableRow>
                        }
                    </TableBody>
                  </Table>
                </Paper>
              </Grid>
            </Grid>
          </Fragment>
          <BeneficiariesDialog 
            onFocus={setOpenCreateDialog}
            open={openCreateDialog}
            setOpenCreateDialog={setOpenCreateDialog}
            beneficiariesList={beneficiariesList}
            onBeneficiariesListChange={onBeneficiariesListChange}
          />
        </Fragment>
      )
}

function BeneficiariesDialog({onBeneficiariesListChange, open, setOpenCreateDialog, beneficiariesList = [BeneficiariesModel]}) {
    const [beneficiaries, setBeneficiaries] = React.useState(BeneficiariesModel)
    const [hasError, setHasError] = React.useState(false)
    const [snackBar, setSnackBar] = React.useState({
      open: false,
      message: "ups"
    })
    function handleClose() {
        setBeneficiaries(BeneficiariesModel)
        setOpenCreateDialog(false)
      }
      function handleSave(){
        debugger
        let totalPercent = beneficiariesList.reduce((comulative, beneficiary) => comulative + beneficiary["percent"], 0 )
        if (totalPercent + beneficiaries.percent > 100){
          setSnackBar({
            open: true,
            message: 'El porcentaje seria mayor al 100%'
          })
          return
        }

        if(
            !isRequired(beneficiaries.name)
            && !isRequired(beneficiaries.parenthood)
            && !isRequired(beneficiaries.address)
            && !isPercent(beneficiaries.percent)
        ){
            beneficiariesList.push(beneficiaries)
            onBeneficiariesListChange(beneficiariesList)
            setBeneficiaries(BeneficiariesModel)
            setOpenCreateDialog(false)
        }else{
          setHasError(true)
          return
        }
    
      }
    return(
      <Fragment>
        <Dialog
      onClose={handleClose}
      open={open}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      maxWidth='md'
      fullWidth
      className='no-printable'
    >
      <DialogTitle id="simple-dialog-title">Agregar Beneficiario</DialogTitle>
      <DialogContent>
      <Grid container spacing={4}>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={beneficiaries.name}
                        onChange={ev => setBeneficiaries({...beneficiaries, name: ev.target.value})}
                        error={hasError && isRequired(beneficiaries.name)}
                        helperText={hasError && isRequired(beneficiaries.name) && "Campo requerido"}
                        label="Nombre:"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={beneficiaries.parenthood}
                        onChange={ev => setBeneficiaries({...beneficiaries, parenthood: ev.target.value})}
                        error={hasError && isRequired(beneficiaries.parenthood)}
                        helperText={hasError && isRequired(beneficiaries.parenthood) && "Campo requerido"}
                        label="Parentesco:"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={beneficiaries.percent}
                        onChange={ev => setBeneficiaries({...beneficiaries, percent: Number(ev.target.value)})}
                        error={hasError && isPercent(beneficiaries.percent)}
                        helperText={hasError && isPercent(beneficiaries.percent) && "Campo requerido"}
                        label="Porcentaje:"
                        margin="normal"
                        type="number"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={beneficiaries.address}
                        onChange={ev => setBeneficiaries({...beneficiaries, address: ev.target.value})}
                        error={hasError && isRequired(beneficiaries.address)}
                        helperText={hasError && isRequired(beneficiaries.address) && "Campo requerido"}
                        label="Domicilio (Calle, #, Colonia, C.P):"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={beneficiaries.birthday_date}
                        onChange={ev => setBeneficiaries({...beneficiaries, birthday_date: ev.target.value})}
                        error={hasError && isRequired(beneficiaries.birthday_date)}
                        helperText={hasError && isRequired(beneficiaries.birthday_date) && "Campo requerido"}
                        label="Fecha de nacimiento:"
                        margin="normal"
                        type="date"
                        InputLabelProps={{
                          shrink: true,
                        }}
                    />
                </FormControl>
            </Grid>
        </Grid>
      </DialogContent>
      <DialogActions>
        <Button onClick={ev => handleClose(ev)}>
          Cancelar
        </Button>
        <Button onClick={ev => handleSave(ev)} color="primary" autoFocus>
          Guardar
        </Button>
      </DialogActions>
    </Dialog>
    <SnackBarSimple
      attributes={snackBar}
      setOpen={setSnackBar}
    />
    </Fragment>
    )
}