text: import React, { useState } from 'react'
  import { useHistory } from 'react-router-dom'
  import { Tab, Tabs, Modal, Button } from 'react-bootstrap'
  import Rechazados from './Rechazados'
  import Autorizados from './Autorizados'
  import Pendientes from './Pendientes'
  import { useSession } from 'react-use-session'
  import { useIdleTimer } from 'react-idle-timer'
  import { postSesionUsuario } from '../../../../services/postSesionUsuario'
  import '../../../../scss/estilos.scss'
  
  const Bancario = () => {
    const history = useHistory()
    const [time, setTime] = useState(null)
    const [mensaje, setMensaje] = useState('')
    const [show, setShow] = useState(false)
    const { session, clear } = useSession('PendrogonIT-Session')
    const comentarios = ['Aprobado', 'Autorización completa']
    const comentariosR = ['Rechazado']
  
    function iniciar(minutos) {
      let segundos = 60 * minutos
      const intervalo = setInterval(() => {
        segundos--
        if (segundos == 0) {
          Cancelar(2)
        }
      }, 1000)
      setTime(intervalo)
    }
  
    function detener() {
      clearInterval(time)
    }
  
    const handleOnIdle = (event) => {
      setShow(true)
      setMensaje(
        'Ya estuvo mucho tiempo sin realizar ninguna acción. Se cerrará sesión en unos minutos.' +
          ' Si desea continuar presione Aceptar',
      )
      iniciar(2)
      console.log('last active', getLastActiveTime())
    }
  
    const handleOnActive = (event) => {
      console.log('time remaining', getRemainingTime())
    }
  
    const handleOnAction = (event) => {}
  
    const { getRemainingTime, getLastActiveTime } = useIdleTimer({
      timeout: 1000 * 60 * parseInt(session == null ? 1 : session.limiteconexion),
      onIdle: handleOnIdle,
      onActive: handleOnActive,
      onAction: handleOnAction,
      debounce: 500,
    })
  
    async function Cancelar(opcion) {
      if (opcion == 1) {
        setShow(false)
        detener()
      } else if (opcion == 2) {
        let idUsuario = 0
        if (session) {
          idUsuario = session.id
        }
        const respuesta = await postSesionUsuario(idUsuario, null, null, '2')
        if (respuesta === 'OK') {
          clear()
          history.push('/')
        }
        detener()
      }
    }
  
    if (session) {
      return (
        <div className="div-tabs">
          <Modal responsive variant="primary" show={show} onHide={() => Cancelar(2)} centered>
            <Modal.Header closeButton>
              <Modal.Title>Confirmación</Modal.Title>
            </Modal.Header>
            <Modal.Body>{mensaje}</Modal.Body>
            <Modal.Footer>
              <Button variant="secondary" onClick={() => Cancelar(2)}>
                Cancelar
              </Button>
              <Button variant="primary" onClick={() => Cancelar(1)}>
                Aceptar
              </Button>
            </Modal.Footer>
          </Modal>
          <div className="div-content">
            <div style={{ width: '100%' }}>
              <Tabs defaultActiveKey="pendientes" id="uncontrolled-tab-example" className="mb-3">
                <Tab eventKey="pendientes" title="Pendientes">
                  <Pendientes tipo={'BANCARIO'} />
                </Tab>
                <Tab eventKey="autorizados" title="Autorizados">
                  <Autorizados comentarios={comentarios} tipo={'BANCARIO'} />
                </Tab>
                <Tab eventKey="rechazados" title="Rechazados">
                  <Rechazados comentarios={comentariosR} tipo={'BANCARIO'} />
                </Tab>
              </Tabs>
            </div>
          </div>
        </div>
      )
    } else {
      history.push('/')
      return <div className="sin-sesion">SIN SESIÓN ACTIVA.</div>
    }
  }
  
  export default Bancario
  