import React, { useState } from 'react'
import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
import { DesktopDatePicker,LocalizationProvider } from '@mui/lab';

import TextField from '@mui/material/TextField';
import { Col, Row } from 'react-bootstrap';

import DateFnsUtils from '@date-io/date-fns';

import { HelpModal } from './HelpAcividades.jsx'
import { LastActivitys } from './LastActivitys.jsx'

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 
                                                sx={{
                                                    '& ::before' : {
                                                        'borderBottom': "0px solid red !important"
                                                    }
                                                }}
                                                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 
                                            sx={{
                                                '& ::before' : {
                                                    'borderBottom': "0px  solid red !important"
                                                }
                                            }}
                                            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>

    )
}
