/**Step 7 */

/** Many */

function EconomicDepends({economicDependList, onEconomicDependListChange}) {

  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 Completo',
      'Parentesco',
      'Escolaridad',
      'Edad'
    ]

    function handleDelete(element, index) {
      economicDependList.splice(index, 1)
      onEconomicDependListChange([...economicDependList])
    }
  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">
                      Dependientes Economicos
                    </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>
                    {
                      economicDependList.length > 0 ?
                      economicDependList.map((item, index) =>
                          <TableRow key={index}>
                            <TableCell style={styles.tableCell}>
                              {item.fullname}
                            </TableCell>
                            <TableCell style={styles.tableCell}>
                              {item.relationship}
                            </TableCell>
                            <TableCell style={styles.tableCell}>
                              {item.schooling}
                            </TableCell>
                            <TableCell style={styles.tableCell}>
                              {item.age}
                            </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 dependientes economicos.
                            </TableCell>
                          </TableRow>
                    }
                </TableBody>
              </Table>
            </Paper>
          </Grid>
        </Grid>
      </Fragment>
      <EconomicDependsDialog 
        onFocus={setOpenCreateDialog}
        open={openCreateDialog}
        setOpenCreateDialog={setOpenCreateDialog}
        economicDependList={economicDependList}
        onEconomicDependListChange={onEconomicDependListChange}
      />
    </Fragment>
    )
}

function EconomicDependsDialog({onEconomicDependListChange, open, setOpenCreateDialog, economicDependList}){
    const [item, setEconomicDepend] = React.useState(EconomicDependsModel)
    const [hasError, setHasError] = React.useState(false)
    function handleClose() {
        setEconomicDepend(EconomicDependsModel)
        setOpenCreateDialog(false)
    }
    function handleSave(){
        if(
        !isRequired(item.name)
        && !isRequired(item.relationship)
        && !isRequired(item.age)
        && !isRequired(item.schooling)
        ){
            economicDependList.push(item)
            onEconomicDependListChange(economicDependList)
            setEconomicDepend(EconomicDependsModel)
            setOpenCreateDialog(false)
        }else{
            setHasError(true)
        return
        }
    }
    return(
        <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 Referencia</DialogTitle>
        <DialogContent>
        <Grid container spacing={4}>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={item.relationship}
                        onChange={ev => setEconomicDepend({...item, relationship: ev.target.value})}
                        label="Parentesco:"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={item.fullname}
                        onChange={ev => setEconomicDepend({...item, fullname: ev.target.value})}
                        label="Nombre completo:"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={item.age}
                        onChange={ev => setEconomicDepend({...item, age: ev.target.value})}
                        label="Edad:"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={item.schooling}
                        onChange={ev => setEconomicDepend({...item, schooling: ev.target.value})}
                        label="Escolaridad:"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
        </Grid>
      </DialogContent>
      <DialogActions>
        <Button onClick={ev => handleClose(ev)}>
          Cancelar
        </Button>
        <Button onClick={ev => handleSave(ev)} color="primary" autoFocus>
          Guardar
        </Button>
      </DialogActions>
    </Dialog>
    )
}