import React, { useEffect, useState, useCallback } from "react";
import {
  Layout,
  Col,
  Row,
  Button,
  Card,
  Typography,
  Tag,
  Modal,
  Image,
} from "antd";
import moment from "moment";
import { firestore } from "../../services/firebase";
import { ViewLoading } from "../../components";
import { useQuery, useAuth } from "../../hooks";
import {
  collection,
  doc,
  getDoc,
  getDocs,
  updateDoc,
  where,
  query as firebaseQuery,
} from "firebase/firestore";

const EventoYager = () => {
  const { Header, Content } = Layout;
  const { Title } = Typography;
  const query = useQuery();
  const { session } = useAuth();
  const idEvento = query.get("id");
  const [cargando, setCargando] = useState(false);
  const [evento, setEvento] = useState(null);
  const [expirado, setExpirado] = useState(false);
  const [usuarios, setUsuarios] = useState(null);

  const styles = {
    gutterRow: {
      paddingBottom: 10,
    },
    image: {
      width: "100%",
      height: 350,
      backgroundSize: "cover",
      backgroundPosition: "center center",
      backgroundImage: `url(${evento?.pathFirebase})`,
    },
  };

  const abrirEnlace = async () => {
    registarEvento("click");
    window.open(evento?.url, "_blank", "noopener,noreferrer");
  };

  const registarEvento = useCallback(
    async (accion) => {
      if (evento && usuarios && accion !== "") {
        try {
          let resultado = { ...evento?.resultado };
          let flag = false;

          if (resultado[session?.uid] === undefined) {
            resultado[session?.uid] = [];
          }

          if (!resultado[session?.uid].includes(accion)) {
            resultado[session?.uid].push(accion);
            flag = true;
          }

          let body = {
            usuarios,
            resultado,
          };

          if (flag) {
            await updateDoc(doc(firestore, "eventos", idEvento), body);
            setEvento({
              ...evento,
              ...body,
            });
          }
        } catch (error) {
          console.log("hubo un problema al guardar el resultado:", error);
          Modal.warning({
            title: "Atención",
            content: "Hubo un problema con el evento, intentalo de nuevo.",
          });
        }
      }
    },
    [evento, idEvento, session?.uid, usuarios]
  );

  useEffect(() => {
    let mounted = true;
    if (mounted && idEvento) {
      try {
        setTimeout(async () => {
          const docRef = doc(firestore, "eventos", idEvento);
          const docSnap = await getDoc(docRef);
          setEvento(docSnap.data());
          setCargando(false);
        }, 0);
      } catch (error) {
        Modal.warning({
          title: "Atención",
          content: "Hubo un problema con el evento, intentalo de nuevo.",
        });
        console.log("error");
      }
    }
  }, [idEvento]);

  // Validar que las fechas esten dentro del rango.
  useEffect(() => {
    if (evento) {
      let fechaHoy = moment(new Date());
      let fechaFinal = moment(evento?.fechaFinal);

      let diff = fechaFinal.diff(fechaHoy, "days");

      if (diff < 0) {
        setExpirado(true);
      }
    }
  }, [evento]);

  // Capturar que vio el evento
  useEffect(() => {
    registarEvento("recibio");
  }, [registarEvento]);

  // Obtener usuarios del evento
  useEffect(() => {
    if (evento) {
      try {
        setTimeout(async () => {
          const q = firebaseQuery(
            collection(firestore, "usuarios"),
            where("grupos", "array-contains-any", evento?.grupos)
          );
          const querySnapshot = await getDocs(q);
          const docs = [];

          querySnapshot.forEach((doc) => {
            const data = doc.data();
            docs.push({
              grupos: data?.grupos,
              facebook: data?.facebook,
              twitter: data?.twitter,
              instagram: data?.instagram,
              telefono: data?.telefono,
              nombre: data?.nombre,
              uid: data?.uid,
              id: doc.id,
            });
          });

          setUsuarios(docs);
        }, 0);
      } catch (error) {
        Modal.warning({
          title: "Atención",
          content: "Hubo un problema con el evento, intentalo de nuevo.",
        });
        console.log("error al cargar usuarios: ", error);
      }
    }
  }, [evento]);

  if (cargando && !evento) return <ViewLoading />;

  return (
    <>
      <Layout className="layout">
        <Row
          style={{ backgroundColor: "white", margin: "10px" }}
          justify="center"
        >
          <Col xs={12} sm={12} md={8} lg={4} xl={4}>
            <Image src={"/LAUD-Logotipo.png"} alt="Logo Laud" preview={false} />
          </Col>
        </Row>
        <Content>
          <Row justify="center">
            <Col span={23}>
              <Card size="large" style={{ width: "100%" }}>
                <Row gutter={10}>
                  <Col span={20}>
                    <Row>
                      <Col span={24} style={styles.gutterRow}>
                        <Title level={3}>{evento?.nombre}</Title>
                      </Col>
                      <Col span={24} style={styles.gutterRow}>
                        <Title level={5}>{evento?.descripcion}</Title>
                      </Col>
                      <Col spam={24} style={styles.gutterRow}>
                        <strong>Acciones: </strong>{" "}
                        {evento?.accion?.map((item) => (
                          <Tag color="#f50" key={item}>
                            {" "}
                            {item}{" "}
                          </Tag>
                        ))}
                      </Col>
                      <Col span={24} style={styles.gutterRow}>
                        <strong>Fecha inicio:</strong>{" "}
                        {moment(evento?.fechaInicio).format("DD-MM-YYYY")}
                      </Col>
                      <Col span={24} style={styles.gutterRow}>
                        {!evento?.sinFechaFin ? (
                          <>
                            {" "}
                            <strong>Fecha final:</strong>{" "}
                            {moment(evento?.fechaFinal).format("DD-MM-YYYY")}{" "}
                          </>
                        ) : (
                          <>
                            {" "}
                            <strong>Fecha final:</strong> sin fecha de
                            finalización{" "}
                          </>
                        )}
                      </Col>
                    </Row>
                  </Col>

                  <Col span={4}>
                    <img
                      src={
                        evento ? "/assets/" + evento?.redSocial + ".png" : ""
                      }
                      width="100%"
                      alt="Red social"
                    />
                  </Col>
                </Row>

                <Row style={{ marginTop: 20 }}>
                  <Col span={24} className="gutter-row">
                    <Button
                      block
                      size="large"
                      disabled={expirado}
                      type="primary"
                      onClick={abrirEnlace}
                    >
                      Ir al evento
                    </Button>
                  </Col>
                </Row>

                <Row style={{ marginTop: 20 }}>
                  <Col span={24}>
                    <div style={styles.image}></div>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
        </Content>
      </Layout>
    </>
  );
};

export default EventoYager;
