import React, { useState } from 'react';

import UpdateIcon from '@mui/icons-material/Update';
import Typography from '@mui/material/Typography';
import Pagination from '@mui/material/Pagination';
import Stack from '@mui/material/Stack';
import { Row, Col } from 'react-bootstrap';

export default function Candidatos () {

    let users =  [{
        password :'repartidorPARMA',
        puesto : "Piloto Repartidor",
        DPI : 1583266600501,
        aplicacion : "27/12/2018 12:02 PM",
        pendientes : "No"
    }]

    for( let _ of new Array(8)  ){
        console.log(_)
        users.push( users[0] )
    }

    const [page, setPage] = useState(1);
    const handleChange = ( _ , value) => {
        console.log("INDEX => ", value)
        setPage(value);
    };

    return (
        <div className="body_historial">
            <div className="header_historial">
                <UpdateIcon style={{  color : "white", fontSize : 25, margin : 0, marginRight: 15, marginLeft :15 }}/>
                <p className="titlie_main">HISTORIAL DE ACCESO DE CANDIDATOS</p>
            </div>
            <div className="content_historial">
                <p>Últimos candidatos que han ingresado al sistema:</p>
                <div className="cabeceras">
                    <Row>
                        <div className="col20"> <p>Contraseña</p> </div>
                        <div className="col20"> <p>Puesto</p> </div>
                        <div className="col20"> <p>No. Identificación</p> </div>
                        <div className="col20"> <p>Fecha de aplicación</p> </div>
                        <div className="col20"> <p>Pruebas Pendientes</p> </div>
                    </Row>
                </div>
                {
                    users.length ?
                    users.map( (user, index) => {
                        return(
                            <div key={index} className="data_candidato">
                                <div className="row">
                                    <div className="col20">
                                        <p>{ user.password }</p>
                                    </div>
                                    <div className="col20">
                                        <p>{ user.puesto }</p>
                                    </div>
                                    <div className="col20">
                                        <p>{ user.DPI }</p>
                                    </div>
                                    <div className="col20">
                                        <p>{ user.aplicacion }</p>
                                    </div>
                                    <div className="col20">
                                        <p>{ user.pendientes }</p>
                                    </div>
                                </div>
                            </div>
                        )
                    }) : undefined
                }
                <Row style={{ padding : 5 }}>
                    <Col>
                        <Stack spacing={2}>
                            <Typography>Page: {page}</Typography>
                            <Pagination count={10} page={page} onChange={handleChange} />
                        </Stack>
                    </Col>
                </Row>
            </div>
        </div>
    )
}
