import React from 'react'
import { Col, Row } from 'react-bootstrap'
import { PersonOutline, VerifiedUser, ListAlt } from '@mui/icons-material/'
import Actividades from '../Components/Home/Actividades'
import Candidatos from '../Components/Home/Candidatos'
import { Card } from '../Components/Card';
import { useSelector } from 'react-redux';
import { Service } from '../Utils/HTTP.js'
import { useQuery } from 'react-query';

export function Home() {

  const auth = useSelector((state) => state.token)
  // const profile = useSelector((state) => state.user.profile)

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

  const { data, status } = useQuery('homepwd', getAllPwd);
  let is_loading = status === "loading";
  console.log({is_loading})

  return (
    <section >
      <div className="content-section">
        <div className="main">
          <div className="panel_options">
            <Row>
              <Col md="4">
                <Card
                  quantity={data?.data?.length || 0} 
                  to='/dashboard/contrasenas' 
                  title='CONTRASEÑAS' 
                  icon={VerifiedUser} 
                />
              </Col>
              <Col md="4">
                <Card
                  quantity={504} to='/dashboard/expedientes' title='EXPEDIENTES' icon={PersonOutline} />
              </Col>
              <Col md="4">
                <Card
                  quantity={343} to="/dashboard/puestos" title='PUESTOS' icon={ListAlt} />
              </Col>
            </Row>
          </div>
          <div className="historial_candidatos">
            <Row>
              <Col md="8">
                <Candidatos 
                  passwords={data?.data || []}
                />
              </Col>
              <Col md="4">
                <Actividades />
              </Col>
            </Row>
          </div>
        </div>
      </div>
    </section>
  )

}