import React, { useEffect, useState } from "react";
import { Table, Modal, Tooltip, message, Divider } from "antd";
import { useHistory, Link } from "react-router-dom";
import {
  EditOutlined,
  DeleteOutlined,
  ShareAltOutlined,
  WhatsAppOutlined,
  FileExcelOutlined,
  PlusCircleOutlined,
  ExclamationCircleOutlined,
  DeliveredProcedureOutlined,
} from "@ant-design/icons";
import moment from "moment";
import { firestore } from "../../../services/firebase";
import { ActionsButton } from "../../../components";
import { SimpleTableLayout } from "../../../components/layouts";
import {
  collection,
  doc,
  getDocs,
  updateDoc,
  query,
  orderBy,
} from "firebase/firestore";
import exportarExcelJS from "../../../services/exportarExcel";

const { REACT_APP_WEB_URL } = process.env;

const UsuariosListado = () => {
  const titulo = "Usuarios";
  const url = "/administracion/usuarios";
  const history = useHistory();
  const { confirm } = Modal;

  const [cargandoUsuarios, setCargandoUsuarios] = useState(true);
  const [usuarios, setUsuarios] = useState([]);
  const [filteredResults, setFilteredResults] = useState([]);
  const [searchInput, setSearchInput] = useState("");
  const [visible, setVisible] = useState(false);
  const [gruposUsuario, setGruposUsuario] = useState([]);

  const [dependencias, setDependencias] = useState({});

  const defaultText = (prop) =>
    prop || <span style={{ color: "#c7c3c3" }}>---</span>;

  const columnsUsuarios = [
    {
      title: "Acciones",
      dataIndex: "id",
      align: "center",
      width: 100,
      render: (_, item) => (
        <ActionsButton
          key={item}
          options={[
            {
              name: "Editar",
              icon: <EditOutlined />,
              onClick: () => history.push(url + "/detalle?id=" + item.id),
            },
            // {
            //   name: "Ver grupos",
            //   icon: <AppstoreOutlined />,
            //   onClick: () => obtenrGrupsUsuario(item.grupos)
            // },
            {
              disabled: item.verificado,
              name: "Verificar manualmente",
              icon: <DeliveredProcedureOutlined />,
              onClick: () => verificarManualmente(item),
            },
            {
              name: "Eliminar",
              icon: <DeleteOutlined />,
              onClick: () => {
                eliminarRegistro(item);
              },
              styleProps: { color: "#e91e63" },
            },
          ]}
        />
      ),
    },
    {
      title: "Nombre",
      dataIndex: "nombre",
      key: "nombre",
      render: (_, item) => (
        <Link to={url + "/detalle?id=" + item.id}>{item.nombre}</Link>
      ),
    },
    {
      title: "Ciudad",
      dataIndex: "ciudad",
      key: "ciudad",
      render: defaultText,
    },
    {
      title: "Fecha de verificación",
      dataIndex: "verificado",
      key: "verificado",
      render: (_, item) =>
        item.verificado === "" ? (
          <span style={{ color: "#c7c3c3" }}>---</span>
        ) : (
          moment(item?.verificado?.toDate()).format("DD-MM-YYYY")
        ),
    },
    {
      title: "Registro",
      dataIndex: "timestamp",
      key: "timestamp",
      render: (_, item) =>
        moment(item?.timestamp?.toDate()).format("DD-MM-YYYY"),
    },
    {
      title: "Verificado",
      dataIndex: "verificado",
      key: "verificado",
      align: "center",
      width: 140,
      render: (_, item) => (
        <Tooltip
          title={item?.verificado === "" ? "Verificar" : "Verificado"}
          onClick={() => {
            if (item.verificado === "") {
              verificarUsuario(item);
            }
          }}
        >
          <WhatsAppOutlined
            style={{
              fontSize: 30,
              color: item.verificado === "" ? "#bfbfbf" : "#45c453",
            }}
          />
          {item?.verificado === "" ? (
            <>
              <br />
              <span style={{ fontSize: 12, color: "gray" }}>
                Obtener enlace
              </span>
            </>
          ) : null}
        </Tooltip>
      ),
    },
  ];

  const columnsGrupos = [
    {
      title: "Nombre",
      dataIndex: "nombre",
      key: "nombre",
      render: defaultText,
    },
    {
      title: "Descripción",
      dataIndex: "descripcion",
      key: "descripcion",
      render: defaultText,
    },
    {
      title: "Registro",
      dataIndex: "timestamp",
      key: "timestamp",
      render: (_, item) =>
        moment(item?.timestamp?.toDate()).format("DD-MM-YYYY"),
    },
  ];

  const multipleButtonData = [
    {
      text: "Agregar",
      to: () => history.push(url + "/nuevo"),
      icon: <PlusCircleOutlined />,
      props: { disabled: false, type: "primary" },
    },
    {
      text: "Generar reporte",
      to: () => generarReporte(),
      icon: <FileExcelOutlined />,
      props: {
        disabled: false,
        style: { background: "#107038", color: "#fff", border: "none" },
      },
    },
    {
      text: "Validar redes",
      to: () => history.push("/administracion/usuarios/redes"),
      icon: <ShareAltOutlined />,
      props: { disabled: false, type: "dashed" },
    },
  ];

  const verificarManualmente = async (item) => {
    try {
      const idUsuario = item?.id;

      let body = {
        ...item,
        verificado: new Date(),
      };
      delete body.id;
      message.success({
        content: "EL número de teléfono ha sido verificado",
      });

      await updateDoc(doc(firestore, "usuarios", idUsuario), body);
    } catch (error) {
      console.log("error a verificar usuario: ", error);
      message.warning({
        content: "Hubo un problema al verificar el número",
      });
    }
  };

  const eliminarRegistro = async (item) => {
    confirm({
      title: `Atención`,
      icon: <ExclamationCircleOutlined />,
      content: "¿Seguro que desea eliminar este registro?",
      onOk: async () => {
        try {
          await updateDoc(doc(firestore, "usuarios", item.id), {
            estatus: false,
          });
        } catch (error) {
          console.log("error al eliminar: ", error);
        }
      },
      onCancel() {},
    });
  };

  const verificarUsuario = (item) => {
    const url = REACT_APP_WEB_URL + "verificar?id=" + item?.id;
    navigator.clipboard.writeText(url);
    message.info({
      content: "Se ha copiado el enlace al portapapeles",
    });
  };

  const onSearch = (searchValue) => {
    setSearchInput(searchValue);
    if (searchValue !== "") {
      const filteredData = usuarios.filter((item) => {
        return Object.values(item)
          .join("")
          .toLowerCase()
          .includes(searchValue.toLowerCase());
      });
      setFilteredResults(filteredData);
    } else {
      setFilteredResults(usuarios);
    }
  };

  const generarReporte = async () => {
    try {
      const dataExcel = [];
      for (let i = 0; i < usuarios?.length; i++) {
        dataExcel.push({
          nombre: usuarios[i]?.nombre,
          ciudad: usuarios[i]?.ciudad,
          email: usuarios[i]?.email,
          genero: usuarios[i]?.genero === "h" ? "Hombre" : "Mujer",
          dependencia: dependenciaUsuarios([usuarios[i]?.dependencias]),
          instagram: usuarios[i]?.instagram,
          facebook: usuarios[i]?.facebook,
          twitter: usuarios[i]?.twitter,
          telefono: usuarios[i]?.telefono,
          registro: moment(usuarios[i]?.timestamp?.toDate()).format(
            "DD-MM-YYYY"
          ),
          verificado: usuarios[i]?.verificado === "" ? "-" : "Verificado",
        });
      }

      const columnasExcel = [
        {
          title: "Nombre",
          dataIndex: "nombre",
          key: "nombre",
        },
        {
          title: "Ciudad",
          dataIndex: "ciudad",
          key: "ciudad",
        },
        {
          title: "Email",
          dataIndex: "email",
          key: "email",
        },
        {
          title: "Genero",
          dataIndex: "genero",
          key: "genero",
        },
        {
          title: "Dependencia",
          dataIndex: "dependencia",
          key: "dependencia",
        },
        {
          title: "Instagram",
          dataIndex: "instagram",
          key: "instagram",
        },
        {
          title: "Facebook",
          dataIndex: "facebook",
          key: "facebook",
        },
        {
          title: "Twitter",
          dataIndex: "twitter",
          key: "twitter",
        },
        {
          title: "Teléfono",
          dataIndex: "telefono",
          key: "telefono",
        },
        {
          title: "Fecha de registro",
          dataIndex: "registro",
          key: "registro",
        },
        {
          title: "Verificado",
          dataIndex: "verificado",
          key: "verificado",
        },
      ];

      await exportarExcelJS(
        columnasExcel,
        dataExcel,
        `usuarios-${moment(new Date()).format("DD-MM-YYYY")}`,
        "Usuarios ",
        `Fecha: ${moment(new Date()).format("DD-MM-YYYY")}`,
        "/LAUD-Logotipo.png",
        ""
      );
    } catch (error) {
      console.log("error al generar reporte: ", error);
    }
  };

  // Obtener grupos por usuario
  // eslint-disable-next-line no-unused-vars
  const obtenrGrupsUsuario = async (grupos) => {
    try {
      const querySnapshot = await getDocs(collection(firestore, "grupos"));
      const docs = [];
      querySnapshot.forEach((doc) => {
        const find = grupos?.find((id) => id === doc.id);
        if (find) {
          docs.push({ ...doc.data(), id: doc.id });
        }
      });

      setGruposUsuario(docs);
      setVisible(true);
    } catch (error) {
      console.log("error al obtener grupos del usuario: ", error);
    }
  };

  // Obtener usuarios
  useEffect(() => {
    try {
      setTimeout(async () => {
        const ref = collection(firestore, "usuarios");
        const q = query(ref, orderBy("nombre", "asc"));
        const querySnapshot = await getDocs(q);
        const docs = [];
        querySnapshot.forEach((doc) => {
          let data = doc.data();
          if (data?.estatus) {
            docs.push({ ...data, id: doc.id });
          }
        });
        setUsuarios(docs);
      }, 0);
    } catch (error) {
      console.log("error al cargar datos de firebase: ", error);
    } finally {
      setCargandoUsuarios(false);
    }
  }, []);

  // Obtener dependencias
  useEffect(() => {
    try {
      setTimeout(async () => {
        const ref = collection(firestore, "dependencias");
        const q = query(ref, orderBy("nombre", "asc"));
        const querySnapshot = await getDocs(q);
        let docs = {};
        querySnapshot.forEach((doc) => {
          let data = doc.data();
          if (data?.estatus) {
            docs[doc.id] = data.nombre;
          }
        });
        setDependencias(docs);
      }, 0);
    } catch (error) {
      console.log("error al cargar datos de firebase: ", error);
    } finally {
      setCargandoUsuarios(false);
    }
  }, []);

  const dependenciaUsuarios = (idDependencia) => {
    let dependenciasNombres = "";
    if (idDependencia.length > 0) {
      idDependencia.forEach((id) => {
        if (dependencias[id] !== undefined) {
          dependenciasNombres += `${dependencias[id]} `;
        }else{
          dependenciasNombres = "Sin dependencia";
        }
      });
    }
    return dependenciasNombres;
  };

  console.log(dependencias);

  return (
    <SimpleTableLayout
      title={titulo}
      multipleButtonData={multipleButtonData}
      onSearchClicked={onSearch}
    >
      <Modal
        title="Grupos"
        centered
        open={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        width={800}
      >
        <Table
          rowKey={"id"}
          columns={columnsGrupos}
          dataSource={gruposUsuario}
          size="small"
          scroll={{ x: 700 }}
        />
      </Modal>
      <Divider />
      <Table
        dataSource={searchInput.length > 1 ? filteredResults : usuarios}
        rowKey={"id"}
        loading={cargandoUsuarios}
        columns={columnsUsuarios}
        size="small"
        scroll={{ x: 700 }}
        pagination={false}
      />
    </SimpleTableLayout>
  );
};

export default UsuariosListado;
