import React, { useEffect, useState, useCallback } from 'react';
import {
  Row,
  Col,
  Form,
  Input,
  Modal,
  Select,
  Button,
  Divider,
  Statistic,
  InputNumber,
  Checkbox
} from "antd";
import { 
  SaveOutlined,
  LikeOutlined,
  AlertOutlined,
  NumberOutlined,
  HourglassOutlined,
  ArrowLeftOutlined, 
} from "@ant-design/icons";
import moment from 'moment'
import HttpService from "../../../services/httpService";
import { useQuery } from "../../../hooks";
import { firestore } from "../../../services/firebase";
import { useHistory } from 'react-router-dom';
import { ViewLoading } from '../../../components';
import { DefaultLayout } from '../../../components/layouts';
import { collection, doc, getDoc, updateDoc, query as queryFirestore, 
  startAfter, where, getDocs, limit, orderBy } from "firebase/firestore";

const UsuariosDetalle = () => {

  const query = useQuery();
  const history = useHistory();
  const { Option } = Select;
  const id = query.get("id");
  const editando = !!id;
  const titulo = editando ? "Editar usuario" : "Agregar usuario";
  const url = "/administracion/usuarios";
  const [ form ] = Form.useForm();

  const [ usuario, setUsuario ] = useState([]);
  const [ cargandoUsuario, setCargandoUsuario ] = useState(true);
  const [ guadandoCargando, setGuardandoCargando ] = useState(false);

  const [cargandoDependencias, setCargandoDependencias] = useState(false);
  const [dependencias, setDependencias] = useState([]);

  const [ atendidos, setAtendidos ] = useState(0);
  const [ pendientes, setPendientes ] = useState(0);
  const [ incompletos, setIncompletos ] = useState(0);
  const [ totales, setTotales ] = useState(0);

  const [ esLiderGlobal, setEsLiderGlobal ] = useState(false);

  const multipleButtonData = [{
    text: "Volver",
    to: () => history.push(url),
    icon: <ArrowLeftOutlined />,
    props: { disabled: false, type: 'primary', }
  }]; 

  const onFinish = async (values) => {
    try {
      setGuardandoCargando(true)
      const { ciudad, email, facebook, genero, instagram, nombre, rol, telefono, twitter, dependencias } = values;

      let body = {
        ciudad: ciudad,
        email: email,
        dependencias: dependencias,
        facebook: facebook?.trim() || '',
        genero: genero?.trim(), 
        instagram: instagram?.trim() || '',
        estatus: true,
        nombre: nombre,
        rol: rol,
        telefono: `${telefono}`?.replace("+52", "") || "", 
        twitter: twitter?.trim() || '',
        liderGlobal: esLiderGlobal,
        sincronizado: null
      }

      if( editando ) {
        body['uid'] = id;
      } else {
        body['verificado'] = '';
        body['clave'] = "yager2022";
        body['timestamp'] = new Date();
      }

      let res = null
      if( editando ) {
        res = await HttpService.putCF('/registro', body);
      } else {
        res = await HttpService.postCF('/registro', body);
      }

      
      if( res?.status >= 200 && res?.status <= 299 ) {

        body['uid'] = editando ? id : res?.response?.uid;
        body['grupos'] = editando ? usuario?.grupos : [];

        await updateDoc(doc(firestore, "usuarios", res?.response?.uid), body);  

        Modal.success({
          title: 'Éxito',
          content: 'Usuario guardado correctamente',
        });
        history.push('/administracion/usuarios/')
      }

    } catch (error) {
      console.log('Error al r usuario: ', error)
      Modal.warning({
        title: 'Atención',
        content: 'Hubo un problema al guardar el usuario',
      });
    } finally {
      setGuardandoCargando(false)
    }

  };

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

  const obtenerEventosUsuario = useCallback(async () => {
    try {
      // Obtener eventos del usuario
      const gruposUsuario = usuario?.grupos;
      const idUsuario = usuario?.uid;

      // Obtener los eventos de todos los grupos
      if( gruposUsuario?.length > 0 ) {
        let q = queryFirestore(collection(firestore, "eventos"), 
          orderBy("timestamp"),
          where('grupos', 'array-contains-any', gruposUsuario), 
          limit(25)
        );
        let querySnapshot = await getDocs(q);
        const docs = [];

        let ultimoDoc = null;
        while(querySnapshot.docs.length) {
          // eslint-disable-next-line no-loop-func
          querySnapshot.forEach((doc) => {
            const data = doc.data();
            ultimoDoc = doc;
            docs.push({ 
              accion: data?.accion, 
              resultado: data?.resultado, 
              usuarios: data?.usuarios, 
              sinFechaFin: data?.sinFechaFin,
              fechaFinal: data?.fechaFinal,
              id: doc.id 
            });
          });

          q = queryFirestore(collection(firestore, "eventos"), 
            orderBy("timestamp"),
            where('grupos', 'array-contains-any', gruposUsuario), 
            limit(25),
            startAfter(ultimoDoc)
          );
          querySnapshot = await getDocs(q);
        }


        let _pendientes = 0;
        let _atendidos = 0;
        let _incompletos = 0;
        let _totales = 0
        for( let i = 0; i < docs?.length; i ++ ) {
          _totales = _totales + 1
          if( docs[i]?.resultado ) {
            if( docs[i]?.resultado[idUsuario] ) {
              if( docs[i]?.resultado[idUsuario].length >= 1  ) {
                _atendidos = _atendidos + 1
              }
              if( docs[i]?.resultado[idUsuario].length === 0 ) {
                _pendientes = _pendientes + 1
              }
              if( !docs[i]?.sinFechaFin ) { // Los que tienen fecha final.
                let fechaHoy = moment( new Date() )
                let fechaFinal = moment( docs[i]?.fechaFinal )
                let diff = fechaFinal.diff(fechaHoy, 'days')
                if( diff < 0 && docs[i]?.resultado[idUsuario].length === 0 ) {
                  _incompletos = _incompletos + 1;
                }
              }

            }
          }
        }  
        setIncompletos(_incompletos)
        setPendientes(_pendientes)
        setAtendidos(_atendidos)
        setTotales(_totales)
      }

    } catch (error) {
      console.log('eror al obtener eventos del usuario: ',  error);
    }
  }, [usuario?.grupos, usuario?.uid]);

  const obtenerDependencias = useCallback(async () => {
    try {
      setCargandoDependencias(true);
      const querySnapshot = await getDocs(collection(firestore, "dependencias"));
      const _docs = [];
      querySnapshot.forEach((doc) => {
        _docs.push({ ...doc.data(), id: doc.id });
      });
      setDependencias(_docs);
    } catch (error) {
      console.log('error al obtener dependencias: ', error);
    } finally {
      setCargandoDependencias(false)
    }
  }, []);
  
  // Obtener eventos del usuario.
  useEffect(() => {
      obtenerEventosUsuario()
  }, [obtenerEventosUsuario]);

  // Obtener usuario
  useEffect(() => {
    let mounted = true;
    if( mounted && editando ) {
      try {
        setTimeout( async () => {
          const docRef = doc(firestore, "usuarios", id);
          const docSnap = await getDoc(docRef);
          setUsuario(docSnap.data());
          if(docSnap.data()?.liderGlobal) {
            setEsLiderGlobal(docSnap.data()?.liderGlobal)
          }
        }, 0);
      } catch (error) {
        console.log('error al obtener usuario: ', error);
      } finally {
        setCargandoUsuario(false)
      }
    };
    return () => mounted = false;
  }, [editando, id]);

  // Dependencias
  useEffect(() => {
    obtenerDependencias();
  }, [obtenerDependencias]);

  // Set form
  useEffect(() => {
    let mounted = true;
    if( mounted && usuario && editando ) {
      form.setFieldsValue({
        ...usuario,
      });
    };
    return () => mounted = false;
  }, [editando, form, usuario]);

  if( cargandoUsuario && editando ) return <ViewLoading />

  return (
    <DefaultLayout
      title={titulo}
      multipleButtonData={multipleButtonData}
    >
      <Form
        form={form}
        name="form"
        autoComplete="off"
        layout="vertical"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >

        {/* Nombre - Género - Correo  */}
        <Row gutter={10}>
          <Col
            className="gutter-row"
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span:  8 }}
          >
            <Form.Item
              label="Nombre"
              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="Género"
              name="genero"
              rules={[{ required: true, message: "Requerido" }]}
            >
              <Select
                placeholder="Seleccionar un género"
                style={{ width: '100%' }}
              >
                <Option value="m">Mujer</Option>
                <Option value="h">Hombre</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col
            className="gutter-row"
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span:  8 }}
          >
            <Form.Item
              label="Correo electrónico"
              name="email"
              rules={[ { type: 'email', message: 'Por favor, escriba un correo electrónico válido' }, { required: true, message: 'Requerido' } ]}
            >
              <Input />
            </Form.Item>
          </Col>

        </Row>

        {/* Facebook - Twitter - Instagram  */}
        <Row gutter={10}>
          <Col
            className="gutter-row"
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span:  8 }}
          >
            <Form.Item
              label="Facebook"
              name="facebook"
            >
              <Input />
            </Form.Item>
          </Col>

          <Col
            className="gutter-row"
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span:  8 }}
          >
            <Form.Item
              label="Twitter"
              name="twitter"
            >
              <Input />
            </Form.Item>
          </Col>

          <Col
            className="gutter-row"
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span:  8 }}
          >
            <Form.Item
              label="Instagram"
              name="instagram"
            >
              <Input />
            </Form.Item>
          </Col>

        </Row>

        {/*  Celular - Rol - Dependencia - Ciudad */}
        <Row gutter={10}>
          
          <Col
            className="gutter-row"
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span:  4 }}
          >
            <Form.Item
              rules={[{ required: true, message: "Requerido" }]}
              label="Celular"
              name="telefono"
            >
              <InputNumber minLength={10} maxLength={10} style={{ width: '100%' }} />
            </Form.Item>
          </Col>

          <Col
            className="gutter-row"
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span:  4 }}
          >
            <Form.Item
              rules={[{ required: true, message: "Requerido" }]}
              label="Rol"
              name="rol"
            >
              <Select 
                placeholder="Seleccionar un rol"
                style={{ width: '100%' }}
              >
                <Option value="admin">Administrador</Option>
                <Option value="cliente">Cliente</Option>
              </Select>
            </Form.Item>
          </Col>

          <Col
            className="gutter-row"
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span:  8 }}
          >
            <Form.Item
              rules={[{ required: true, message: "Requerido" }]}
              label="Dependencia"
              name="dependencias"
            >
              <Select 
                placeholder="Seleccionar un una dependencia"
                style={{ width: '100%' }}
                allowClear
                loading={cargandoDependencias}
                showSearch
                disabled={cargandoDependencias}
                options={ dependencias?.length > 0 && dependencias?.map (i => ({
                  ...i,
                  value: i?.id,
                  label: i?.nombre,
                })) }
              />
            </Form.Item>
          </Col>
          
          <Col
            className="gutter-row"
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span:  8 }}
          >
            <Form.Item
              rules={[{ required: true, message: "Requerido" }]}
              label="Ciudad"
              name="ciudad"
            >
              <Input />
            </Form.Item>
          </Col>

        </Row>

        <Row gutter={10}>
          <Col
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 12 }}
            lg={{ span:  8 }}
          >
            <Form.Item
              // rules={[{ required: true, message: "Requerido" }]}
              label="Lider Global"
              name="liderGlobal"
            >
              <Checkbox
                checked={esLiderGlobal}
                onChange={(e) => setEsLiderGlobal(e.target.checked)}
              />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={10}>
          <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>

      <Divider />

      {/* Atendidos | Pendientes | Incompletos | Totales  */}
      { editando && ( 
      <Row gutter={10}>
        <Col
          className="gutter-row"
          xs={{ span: 24 }}
          sm={{ span: 24 }}
          md={{ span: 6 }}
          lg={{ span: 6 }}
        >
          <Statistic title="Atendidos" value={atendidos} prefix={<LikeOutlined />} />
        </Col>

        <Col
          className="gutter-row"
          xs={{ span: 24 }}
          sm={{ span: 24 }}
          md={{ span: 6 }}
          lg={{ span: 6 }}
        >
          <Statistic title="Pendientes" value={pendientes} prefix={<HourglassOutlined />} />
        </Col>

        <Col
          className="gutter-row"
          xs={{ span: 24 }}
          sm={{ span: 24 }}
          md={{ span: 6 }}
          lg={{ span: 6 }}
        >
          <Statistic title="Incompletos" value={incompletos} prefix={<AlertOutlined />} />
        </Col>

        <Col
          className="gutter-row"
          xs={{ span: 24 }}
          sm={{ span: 24 }}
          md={{ span: 6 }}
          lg={{ span: 6 }}
        >
          <Statistic title="Eventos totales" value={totales} prefix={<NumberOutlined />} />
        </Col>

      </Row>
      ) }
      

    </DefaultLayout>
  )
}

export default UsuariosDetalle