import * as React from 'react';
import { default as CustomToolbar } from '../Components/Password/CustomToolbar';
import { Paper, Box, ThemeProvider } from '@mui/material';

import MUIDataTable from "mui-datatables";
import { Encabezados, Build } from '../Components/Password/Rows';
import { TableStyle, TextLabels } from '../Components/Password/TableStyle'

import { useQuery } from 'react-query';
import { Service } from '../Utils/HTTP.js'
import useAuth from '../Auth/useAuth'

export function Contrasv2() {

    const auth = useAuth();
    const token = React.useRef(auth.getToken())

    const getAllPwd = async () => {
        let rest = new Service('/contrasenia/getallbyidUsr');
        return await rest.getQuery(token.current)
    }

    const { data, status  } = useQuery('passwords', getAllPwd );

    const options = {
        filterType: 'checkbox',
        customToolbar: () => {
            return (
                <CustomToolbar />
            );
        },
        textLabels: TextLabels
    };


    return (
        <div className="content-section">
            <div className="main">
                <Box sx={{ width: '100%' }}>
                    <Paper elevation={0} sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh', boxShadow: 'none !important' }}>
                        <ThemeProvider theme={TableStyle}>
                            <MUIDataTable
                                sx={{ '& MuiPaper': { elevation: 0, boxShadow: 'none', color: "red" } }}
                                title={"Contraseñas"}
                                data={Build( status ==='success' ? data.data : [])}
                                columns={Encabezados}
                                options={options}
                            />
                        </ThemeProvider>
                    </Paper>
                </Box>
            </div>
        </div>
    );

}
