import React, { useState } from 'react'
import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
import TextField from '@mui/material/TextField';
import { Col, Row, Modal } from 'react-bootstrap';

import LocalizationProvider from '@mui/lab/LocalizationProvider';

import DateFnsUtils from '@date-io/date-fns';
import DesktopDatePicker from '@mui/lab/DesktopDatePicker';

function HelpModal (props) {
    let { visible, handleClose } = props
    return (
        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={handleClose}> 
            <Modal.Header>
                <button type="button" className="close" onClick={handleClose}>&times;</button>
                <h4 className="modal-title">Asistencia</h4>
            </Modal.Header>
            <Modal.Body className="modal-body">
                <div className="data_notification">
                    <p>La lista muestra un historial de las actividades que se han realizado en cada módulo del sistema a nivel Administradores y Asistentes, realice búsquedas avanzadas o simplemente actualice la lista para obtener los últimos registros.</p>
                </div>
            </Modal.Body>
        </Modal>
    )
}

function LastActivitys() {
    

    let activitys = [{
        password : "rcardona2510",
        description : "Creó la contraseña: pilotosanti",
        module : "Contraseñas",
        date : "21/12/18 7:25:52",
    },{
        password : "rcardona2510",
        description : "Creó la contraseña: pilotosanti",
        module : "Contraseñas",
        date : "21/12/18 8:25:52",
    },{
        password : "rcardona2510",
        description : "Creó la contraseña: pilotosanti",
        module : "Contraseñas",
        date : "21/12/18 9:25:52",
    } ]

    return(
        <React.Fragment>
            {
                activitys.map( ( activity, index ) => {
                    return(
                        <div key={index} className="body_history">
                            <div className="row">
                                <div className="col25">
                                    <p>{ activity.password }</p>
                                </div>
                                <div className="col25">
                                    <p>{ activity.description }</p>
                                </div>
                                <div className="col25">
                                    <p>{ activity.module }</p>
                                </div>
                                <div className="col25">
                                    <p>{ activity.date }</p>
                                </div>
                            </div> 
                        </div>

                    )
                })
            }
        </React.Fragment>
    )
}

export default function Actividades() {

    const [value, setValue] = React.useState(new Date());
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const handleChange = (newValue) => {
        setValue(newValue);
    };

    return(
        <div className="actividades_recientes">
            <div className="cabecera_recently">
                <FlightTakeoffIcon style={{   color : "#607d8b", fontSize : 25, margin : 0, marginRight: 15, marginLeft :15  }}/>
                <p>HISTORIAL DE ACTIVIDADES</p>
            </div>
            <div className="content_historial">
                <p>Últimas actividades registradas</p>
                <div className="data_actividad">
                    <div className="filtros_history">
                        <Row>
                            <Col md="4">
                                <label>Contraseña</label>
                                <input type="text" name="contraseña" placeholder="Contraseña"/>
                            </Col>
                            <Col md="4">
                                <label>Módulo</label>
                                <select>
                                    <option>Puestos</option>
                                    <option>Contraseñas</option>
                                    <option>Expedientes</option>
                                    <option>Resultados</option>
                                    <option>Pruebas</option>
                                    <option>Ajustes</option>
                                    <option>Membresías</option>
                                    <option>Sesiones</option>
                                </select>
                            </Col>
                            <Col md="4">
                                <label>Acción</label>
                                <select>
                                    <option>Crear</option>
                                    <option>Editar</option>
                                    <option>Eliminar</option>
                                    <option>Desbloquear</option>
                                </select>
                            </Col>
                        </Row>
                        <Row style={{ display : 'flex', alignItems : "flex-end" }}>
                            <Col md="4">
                                <label>Fecha Inicio</label>
                                <LocalizationProvider dateAdapter={DateFnsUtils}>
                                    <DesktopDatePicker
                                        inputFormat="MM/dd/yyyy"
                                        value={value}
                                        onChange={handleChange}
                                        renderInput={(params) => 
                                        <TextField fullWidth={true} variant="standard" label="Standard warning" {...params} />}
                                    />
                                </LocalizationProvider>
                            </Col>
                            <Col md="4">
                                <label>Fecha Final</label>
                                <LocalizationProvider dateAdapter={DateFnsUtils}>
                                    <DesktopDatePicker
                                        inputFormat="MM/dd/yyyy"
                                        value={value}
                                        onChange={handleChange}
                                        renderInput={(params) => 
                                        <TextField fullWidth={true} variant="standard" label="Standard warning" {...params} />}
                                    />
                                </LocalizationProvider>
                            </Col>
                            <Col md="4">
                                <button className="buscar_filtros_history">Buscar</button>
                            </Col>
                        </Row>
                    </div>
                    <div className="cabeceras_actividad">
                        <div className="row">
                            <div className="col25">
                                <p>Contraseña</p>
                            </div>
                            <div className="col25">
                                <p>Descripción</p>
                            </div>
                            <div className="col25">
                                <p>Módulo</p>
                            </div>
                            <div className="col25">
                                <p>Fecha</p>
                            </div>
                        </div>
                    </div>
                    <LastActivitys/>
                    <div className="footer_history">
                        <div className="text-color" onClick={handleShow}>Ayuda</div>
                    </div>
                    <HelpModal visible={show} handleClose={handleClose}/>
                </div>
            </div>
        </div>

    )
}
