import React, { useState, useEffect } from "react";
import { Form, Button, Row, Col, Input, Modal, Table, message } from "antd";
import { SaveOutlined, UserOutlined, WhatsAppOutlined, ArrowLeftOutlined, AlertOutlined } from "@ant-design/icons";
import moment from "moment";
import { useQuery } from "../../../hooks";
import { useHistory } from "react-router-dom";
import { firestore } from "../../../services/firebase";
import { ViewLoading } from "../../../components";
import { DefaultLayout } from "../../../components/layouts";
import { addDoc, collection, doc, getDoc, getDocs, updateDoc, where, query as firebaseQuery } from "firebase/firestore";

const GruposDetalle = () => {
  
  const query = useQuery();
  const history = useHistory();
  const { TextArea } = Input;
  const id = query.get("id");
  const editando = !!id;
  const titulo = editando ? "Editar grupo" : "Agregar grupo";
  const url = "/administracion/grupos";
  const [form] = Form.useForm();

  const [grupo, setGrupo] = useState([]);
  const [cargandoGrupo, setCargandoGrupo] = useState(true);
  const [guadandoCargando, setGuardandoCargando] = useState(false);
  const [cargandoUsuarios, setCargandoUsuarios] = useState(false);
  const [usuarios, setUsuarios] = useState(null);
  const [visible, setVisible] = useState(false);
  const [idsUsuariosGrupo, setIdsUsuariosGrupo] = useState([]);
  const [usuariosEnGrupo, setUsuariosEnGrupo] = useState([]);
  const [cargandoAviso, setCargandoAviso] = useState(false);

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

  const multipleButtonData = [
    {
      text: "Volver",
      to: () => history.push(url),
      icon: <ArrowLeftOutlined />,
      props: { disabled: false, type: "primary", size: "large" },
    },
    {
      text: "Enviar aviso de Laud",
      to: () => enviarAviso(),
      icon: <AlertOutlined />,
      props: { disabled: false, type: "dashed", loading: cargandoAviso, size: "large" },
    },
  ];

  const columns = [
    {
      title: "Nombre",
      dataIndex: "nombre",
      key: "nombre",
      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) => (
        <WhatsAppOutlined
          style={{
            fontSize: 20,
            color: item.verificado === "" ? "#bfbfbf" : "#45c453",
          }}
        />
      ),
    },
  ];

  const rowSelection = {
    onChange: (selectedRowKeys, _) => {
      setUsuariosEnGrupo(_);
      setIdsUsuariosGrupo(selectedRowKeys);
    },
  };

  const onFinish = async (values) => {
    try {
      setGuardandoCargando(true);

      const { ciudad, descripcion, nombre } = values;

      if (usuariosEnGrupo?.length === 0) {
        message.info({
          content: "Debes seleccionar al menos un usuario.",
        });
        return;
      }

      let body = {
        ciudad: ciudad || "",
        descripcion: descripcion || "",
        nombre: nombre || "",
        timestamp: editando ? grupo?.timestamp : new Date(),
        estatus: editando ? grupo?.estatus : true,
      };

      let docRef = null;

      // Agregamos o editamos el documento grupo
      if (editando) {
        await updateDoc(doc(firestore, "grupos", id), body);
      } else {
        docRef = await addDoc(collection(firestore, "grupos"), body);
      }

      const idDocumento = editando ? id : docRef?.id;

      // Agregamos usuarios al grupo
      for (let i = 0; i < usuarios?.length; i++) {
        const find = usuariosEnGrupo.filter(
          (u) => u?.id === usuarios[i]?.id
        )[0];

        let usuario = {
          ...usuarios[i],
        };

        // Obtenemos los grupos de cada usuario
        const usuarioGrupos = usuarios[i]?.grupos?.length
          ? usuarios[i]?.grupos
          : [];

        //  usuarios que vamos a agregarles el grupo
        if (find) {
          let _arrayGrupos = usuarioGrupos;
          _arrayGrupos.push(idDocumento);

          // Eliminar duplicados
          _arrayGrupos = [...new Set(_arrayGrupos)];
          usuario = {
            ...usuarios[i],
            grupos: _arrayGrupos,
          };
        } else {
          if (usuarioGrupos.length > 0) {
            let gruposFiltrados = usuarioGrupos.filter((i) => i !== id);
            usuario = {
              ...usuarios[i],
              grupos: gruposFiltrados,
            };
          }
        }

        await actualizarUsuario(usuario);
      }

      Modal.success({
        title: "Éxito",
        content: "Grupo guardado correctamente",
      });

      history.push(url);
    } catch (error) {
      Modal.warning({
        title: "Atención",
        content: "Hubo un problema al guardar, intentalo de nuevo.",
      });
      console.log("Error al guardar: ", error);
    } finally {
      setGuardandoCargando(false);
    }
  };

  const onFinishFailed = () => {
    Modal.warning({
      title: "Atención",
      content: "Por favor revise los datos.",
      style: { marginTop: "20vh" },
    });
  };

  const actualizarUsuario = async (body) => {
    let idDoc = body?.id;
    delete body?.id;
    try {
      await updateDoc(doc(firestore, "usuarios", idDoc), body);
    } catch (error) {
      console.log("error al agregar grupo al usuario: ", error);
    }
  };

  const enviarAviso = async () => {
    try {
      setCargandoAviso(true);
      const plantilla = "aviso_agregar_numero";
      const titulo = "AVISO IMPORTANTE";
      const arrUsuarios = [];

      usuariosEnGrupo.forEach(u => {

        let tieneFb = false;
        let tieneIg = false;
        let tieneTw = false; 

        if(u?.facebookVerificado) tieneFb = true;
        if(u?.instagramVerificado) tieneIg = true;
        if(u?.twitterVerificado) tieneTw = true;

        const usuario = {
          uid: u?.uid,
          nombre: u?.nombre,
          telefono: u?.telefono,
          fb: tieneFb,
          ig: tieneIg,
          tw: tieneTw,
        }
        arrUsuarios.push(usuario)
      });

      const body = {
        plantilla: plantilla,
        titulo: titulo,
        enviado: null,
        fecha: new Date(),
        usuarios: arrUsuarios,
        idGrupo: id
      }

      // Buscamos si existe un registro con el ID del evento y la misma plantilla
      const q = firebaseQuery(collection(firestore, "notificaciones"), where('idGrupo', "==", id));
      const querySnapshot = await getDocs(q);

      let c = 0;
      querySnapshot.forEach((doc) => {
        if(doc.data().plantilla === plantilla) {
          c++
        }
      });

      if(c > 0) {
        message.info("Ya hay un recordatorio de este evento.")
        return
      }

      await addDoc(collection(firestore, "notificaciones"), body);
      message.success("Recordatorio enviado.")

    } catch (error) {
      message.error("Error al enviar la notificacion");
      console.log('error al enviar aviso: ', error);
    } finally {
      setCargandoAviso(false)
    }
  };

  // Obtener usuarios
  useEffect(() => {
    try {
      setCargandoUsuarios(true);
      setTimeout(async () => {
        const querySnapshot = await getDocs(collection(firestore, "usuarios"));
        const docs = [];
        const _arr = [];
        querySnapshot.forEach((doc) => {
          if (doc?.data()?.estatus && doc?.data()?.verificado !== "") {
            const _grupoId = doc?.data()?.grupos?.filter((x) => x === id)[0];
            if (_grupoId) {
              _arr.push({ ...doc?.data(), id: doc?.id });
            }
            docs.push({ ...doc?.data(), id: doc?.id });
          }
        });
        setUsuariosEnGrupo(_arr);
        setUsuarios(docs.sort( (a,b) => b?.nombre > a?.nombre ? -1 : 1));
      }, 0);
    } catch (error) {
      console.log("error al cargar usuarios:", error);
    } finally {
      setCargandoUsuarios(false);
    }
  }, [id]);

  useEffect(() => {
    let mounted = true;
    if (mounted && editando) {
      try {
        setTimeout(async () => {
          const docRef = doc(firestore, "grupos", id);
          const docSnap = await getDoc(docRef);
          setGrupo(docSnap.data());
        }, 0);
      } catch (error) {
        console.log("Error al obtener grupo: ", error);
      } finally {
        setCargandoGrupo(false);
      }
    }
    return () => (mounted = false);
  }, [editando, id]);

  useEffect(() => {
    let mounted = true;
    if (mounted && editando) {
      if (usuariosEnGrupo.length > 0) {
        setIdsUsuariosGrupo(usuariosEnGrupo?.map((item) => item.id));
      }

      form.setFieldsValue({
        ...grupo,
      });
    }
    return () => (mounted = false);
  }, [editando, form, grupo, usuariosEnGrupo]);

  if (cargandoGrupo && editando) return <ViewLoading />;

  return (
    <DefaultLayout title={titulo} multipleButtonData={multipleButtonData}>
      <Modal
        title="Agregar usuarios"
        centered
        open={visible}
        okText="Agregar"
        cancelText="Cerrar"
        okButtonProps={{ style: { display: "none" } }}
        onCancel={() => setVisible(false)}
        width={1000}
      >
        <Table
          rowSelection={{
            type: "checkbox",
            selectedRowKeys: idsUsuariosGrupo,
            ...rowSelection,
          }}
          rowKey={"id"}
          loading={cargandoUsuarios}
          size="small"
          columns={columns}
          pagination={false}
          dataSource={ usuarios }
        />
      </Modal>

      <Form
        name="form"
        form={form}
        autoComplete="off"
        layout="vertical"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        {/* Nombre del grupo - Ciudad - Cantidad de códigos  */}
        <Row gutter={10}>
          <Col
            className="gutter-row"
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span: 8 }}
          >
            <Form.Item
              label="Nombre del grupo"
              name="nombre"
              rules={[{ required: true, message: "Requerido" }]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col
            className="gutter-row"
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span: 8 }}
          >
            <Form.Item
              label="Ciudad"
              name="ciudad"
              rules={[{ required: true, message: "Requerido" }]}
            >
              <Input />
            </Form.Item>
          </Col>
        </Row>

        {/* Descripción  */}
        <Row gutter={10}>
          <Col className="gutter-row" span={24}>
            <Form.Item
              label="Descripción"
              name="descripcion"
              rules={[{ required: true, message: "Requerido" }]}
            >
              <TextArea rows={4} placeholder="Ingrese una Descripción" />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={10}>
          <Col
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span: 8 }}
          >
            <Button
              type="dashed"
              icon={<UserOutlined />}
              block
              onClick={() => setVisible(true)}
              size="large"
            >
              Agregar usuarios ({usuariosEnGrupo?.length})
            </Button>
          </Col>
          <Col
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span: 8 }}
          >
            <Button
              type="primary"
              htmlType="submit"
              icon={<SaveOutlined />}
              block
              size="large"
              loading={guadandoCargando}
            >
              Guardar
            </Button>
          </Col>
        </Row>
      </Form>
    </DefaultLayout>
  );
};

export default GruposDetalle;
