//** Step 5*/ five references
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',
  'Whatsapp',
]
function InformalReferences({informalReferenceList, onInformalReferenceListChange, hasError}) {
  const [openCreateDialog, setOpenCreateDialog] = React.useState(false)
  function handlerAdd(ev) {
    if (informalReferenceList.length < 3){
      setOpenCreateDialog(true)
    }
  }

  function handleDelete(element, index) {
    informalReferenceList.splice(index, 1)
    onInformalReferenceListChange([...informalReferenceList])
  }

  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">
                      Prospectos
                    </Typography>
                  </Grid>
                  <Grid item xs={6}>
                      <Button color="primary" style={styles.buttonAdd} onClick={ev => handlerAdd(ev)} >
                        AGREGAR
                        
                      </Button>
                  </Grid>
                </Grid>
              </Toolbar>
                <Table>
                  <TableHead>
                    <TableRow>
                      {
                        headers.map((header, index) => 
                          <TableCell key={index}>
                            {header}
                          </TableCell>
                        )
                      }
                      <TableCell>
                          Acciones
                      </TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {
                      informalReferenceList.length > 0 ?
                        informalReferenceList.map((item, index) =>
                          <TableRow key={index}>
                            <TableCell style={styles.tableCell}>
                              {item.name}
                            </TableCell>
                            <TableCell style={styles.tableCell}>
                              {item.whatsapp}
                            </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 referencias.
                            </TableCell>
                          </TableRow>
                    }
                </TableBody>
              </Table>
            </Paper>
          </Grid>
        </Grid>
      </Fragment>
      <InformalReferencesDialog 
        onFocus={setOpenCreateDialog}
        open={openCreateDialog}
        setOpenCreateDialog={setOpenCreateDialog}
        informalReferenceList={informalReferenceList}
        onInformalReferenceListChange={onInformalReferenceListChange}
      />
    </Fragment>
  )
}

function InformalReferencesDialog({onInformalReferenceListChange, open, setOpenCreateDialog, informalReferenceList}){
  const [informalReference, setInformalReference] = React.useState(InformalReferenceModel)
  const [hasError, setHasError] = React.useState(false)
  function handleClose() {
    setInformalReference(InformalReferenceModel)
    setOpenCreateDialog(false)
  }
  function handleSave(){
    if(
      !isRequired(informalReference.name)
      && !minLenght(informalReference.whatsapp, 6)
    ){
      informalReferenceList.push(informalReference)
      onInformalReferenceListChange(informalReferenceList)
      setInformalReference(InformalReferenceModel)
      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={informalReference.name}
                    onChange={ev => setInformalReference({...informalReference, name: ev.target.value})}
                    error={hasError && isRequired(informalReference.name)}
                    helperText={hasError && isRequired(informalReference.name) && "Campo requerido"}
                    label="Nombre:"
                    margin="normal"
                    required
                  />
              </FormControl>
          </Grid>
          <Grid item xs={12} sm={6}>
              <FormControl fullWidth>
                  <TextField
                    value={informalReference.whatsapp}
                    onChange={ev => setInformalReference({...informalReference, whatsapp: ev.target.value})}
                    error={hasError && minLenght(informalReference.whatsapp, 6)}
                    helperText={hasError && minLenght(informalReference.whatsapp, 6) && "Campo requerido"}
                    label="Teléfono con Whatsapp:"
                    margin="normal"
                    type="number"
                    required
                  />
              </FormControl>
          </Grid>
      </Grid>
      </DialogContent>
      <DialogActions>
        <Button onClick={ev => handleClose(ev)}>
          Cancelar
        </Button>
        <Button onClick={ev => handleSave(ev)} color="primary" autoFocus>
          Guardar
        </Button>
      </DialogActions>
    </Dialog>
  )
}