import React, { useState, useEffect } from 'react';

import UpdateIcon from '@mui/icons-material/Update';

import {
    Typography, Pagination, Stack, 
    // CircularProgress, Box
} from '@mui/material'

import { Row, Col } from 'react-bootstrap';

import { Candidato, Preview } from './Candidato'
// const USER_LENGTH = 14
const USER_LENGTH = 120


function Divide(arregloOriginal){

    const LONGITUD_PEDAZOS = 8;
    let arregloDeArreglos = [];
    for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
        let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);
        arregloDeArreglos.push(pedazo);
    }
    return arregloDeArreglos
}

export default function Candidatos () {

    const [page, setPage] = useState(1);
    const [users, setUser] = useState([]);

    const changePage = ( _ , value) => {
        let page_numer = value;
        Divide(users)
        setPage(page_numer);
    };

    useEffect(() => {

        setTimeout(() => {
            let list =  [{
                password : 'tester',
                puesto : "Piloto Repartidor",
                DPI : 0,
                // aplicacion : "27/12/2018 12:02 PM",
                aplicacion : new Date().toUTCString(),
                pendientes : "No"
            }]

            let a = 1;
            for( let _ of new Array(USER_LENGTH)  ){
                if(_) break

                let temp = {
                    ...list[0],
                    DPI : a * 1000,
                    password : Math.random().toString(36).slice(5), 
                    aplicacion : new Date(10,12,a).toUTCString(),
                }

                a=a+1;
                list.push(temp)
            }

            let divided = Divide(list);

            setUser(divided)

        },3000)

    }, [])



    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[page - 1].map( user => (<Candidato key={user.DPI} user={user}/>)) 
                    : <Preview lenght={10}/>
                }
                <Row style={{ padding : 5 }}>
                    <Col>
                        <Stack style={{ display : 'flex', flexDirection : 'row', alignItems: 'baseline'  }} spacing={2}>
                            <Typography style={{ paddingTop : 15, paddingRight : 10 }}>Page: {page}</Typography>
                            <Pagination 
                                siblingCount={5} 
                                shape='rounded' 
                                count={users.length} 
                                page={page} 
                                onChange={changePage} />
                        </Stack>
                    </Col>
                </Row>
            </div>
        </div>
    )
}