import {useState} from 'react'
import { 
    IconButton,Typography,Toolbar,
    Tooltip
} from '@mui/material'

import { alpha } from '@mui/material/styles';
import { HelpModal } from '../Modal/PasswordModal'

import {
    Delete as DeleteIcon,
    Add as AddIcon,
    ManageSearch as SearchIcon,
} from '@mui/icons-material/'

export const TableEncabezadoOperation = (props) => {

    const { numSelected } = props;
    const [ visible, setVisible ] = useState(false);

    return (
        <Toolbar
            sx={{
                pl: { sm: 2 },
                pr: { xs: 1, sm: 1 },
                ...(numSelected > 0 && {
                    bgcolor: (theme) =>
                        alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
                }),
            }}
        >
            {numSelected > 0 ? (
                <Typography
                    sx={{ flex: '1 1 100%' }}
                    color="inherit"
                    variant="subtitle1"
                    component="div"
                >
                    {numSelected} Seleccionados
                </Typography>
            ) : (
                    <Typography
                        sx={{ flex: '1 1 100%' }}
                        variant="h6"
                        id="tableTitle"
                        component="div"
                    >
                        Contraseñas
                    </Typography>
                )}

            {numSelected > 0 ? (
                <Tooltip title="Elimnar">
                    <IconButton>
                        <DeleteIcon />
                    </IconButton>
                </Tooltip>
            ) : (
                    <div className="contras_operation">
                        <Tooltip title="Buscar">
                            <IconButton>
                                <SearchIcon />
                            </IconButton>
                        </Tooltip>
                        <Tooltip title="Agregar">
                            <IconButton onClick={() => setVisible(true) }>
                                <AddIcon />
                            </IconButton>
                        </Tooltip>
                    </div>
                )}
            <HelpModal visible={visible} handleClose={() => setVisible(false)} />
        </Toolbar>
    );

}
