import { Card, Col, Layout, Row, Typography } from "antd";
import { Content, Header } from "antd/lib/layout/layout";
import { useModel, useModels, useQuery } from "../../hooks";
import React, { useEffect, useMemo, useState } from "react";
import Tabla from "../../components/Tabla";
import HttpService from "../../services/httpService";
import moment from "moment";

const EventoResumenDependencia = () => {
  const q = useQuery();
  const id = q.get("id");
  const [eventoResumen, setEventoResumen] = useState({});

  const extraParams = useMemo(
    () => ({
      id: id,
    }),
    [id]
  );

  const columns = [
    {
      title: "Dependencia",
      dataIndex: "nombreDependencia",
      key: "nombreDependencia",
    },
    {
      title: "Usuario",
      dataIndex: "nombre",
      key: "nombre",
      // render: (item)=> item?.nombre
    },
    {
      title: "Paticipacion",
      dataIndex: "participacion",
      key: "participacion",
    },
    {
      title: "Total de Eventos",
      dataIndex: "totalEventos",
      key: "totalEventos",
    },
    {
      title: "Total de Eventos",
      dataIndex: "totalEventos",
      key: "totalEventos",
      align: "center",
    },
  ];

  useEffect(() => {
    const consultar = async () => {
      const { resultado } = await HttpService.getCF(
        `v1/evento-resumen/consulta?d=${id}`
      );
      console.log(resultado);
      if (resultado?.detalle) {
        setEventoResumen(resultado.detalle);
      }
    };
    consultar();
  }, [id]);

  return (
    <Layout className="layout" style={{ height: "100%" }}>
      <Card>
        <Row
          align="bottom"
          style={{ backgroundColor: "white" }}
          gutter={[10, 10]}
        >
          <Col>
            <img src={"/LAUD-Logotipo.png"} width={120} alt="Logo Laud" />
          </Col>
          <Col
            style={{
              display: "flex",
              alignContent: "center",
            }}
          >
            <Typography.Title>
              Resumen de eventos de la semana del{" "}
              {moment(eventoResumen?.inicio).format("DD/MM/YYYY")} al{" "}
              {moment(eventoResumen?.fin).format("DD/MM/YYYY")}
            </Typography.Title>
          </Col>
        </Row>
      </Card>
      <Content>
        <Tabla
          nameURL="v1/evento-resumen/consulta-dependencia"
          // expand="dependencia, eventoResumen, grupo, usuario"
          paginacion={false}
          extraParams={extraParams}
          columns={columns}
          scroll={{ x: "30vw" }}
        />
      </Content>
    </Layout>
  );
};

export default EventoResumenDependencia;
