import React, { useState, useEffect} from 'react'
import { Table, Row, Col, Select, Typography, Divider, Tooltip } from 'antd'
import { firestore } from '../../../services/firebase';
import { collection, onSnapshot, getDocs, query as firebaseQuery, where,  } from "firebase/firestore";
import { DefaultLayout } from '../../../components/layouts';
import { CheckCircleOutlined, FieldTimeOutlined, MinusOutlined  } from '@ant-design/icons';

const { Option } = Select;

const SinParticipar = () => {

  const [eventos, setEventos] = useState([]);
  const [cargandoEventos, setCargandoEventos] = useState(false);
  const [eventoSeleccionado, setEventoSeleccionado] = useState(null);
  const [usuarios, setUsuarios] = useState([]);
  const [resultado, setResultado] = useState([]);
  const [grupoEvento, setGrupoEvento] = useState([]);

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

  const RenderAccion = (item, redSocial) => {

    if( eventos.length < 1 ) {
      return
    }

    const idUsuario = item.uid;
    const red = redSocial.toLowerCase();

    if( item[red].replace(/\s/g, '') === "" ) {
      return (
        <Tooltip title="Sin red social">
          <MinusOutlined />
        </Tooltip>
      )
    }

    for(let i = 0; i < eventos?.length; i++ ) {

      if(grupoEvento[i]?.red === redSocial) {
        if(grupoEvento[i]?.red === redSocial) {

          if(grupoEvento[i]?.resultado[idUsuario]?.length > 0) {
            return (
              <Tooltip title="Participo">
                <CheckCircleOutlined style={{ color: '#33ca3a', fontSize: 24 }} />
              </Tooltip>
            )
          } else {
            return (
              <Tooltip title="Sin participación">
                <FieldTimeOutlined style={{ color: '#c7c3c3', fontSize: 24 }} />
              </Tooltip>
            )
          }

        }
      }
    }
 

  };  

  const columns = [
    {
      title: "Usuario",
      dataIndex: "nombre",
      key: "nombre",
      render: defaultText,
    },
    {
      title: "Facebook",
      dataIndex: "facebook",
      key: "facebook",
      align: 'center',
      render: (_, item )=> RenderAccion(item, "Facebook")
    },
    {
      title: "Instagram",
      dataIndex: "instagram",
      key: "instagram",
      align: 'center',
      render: (_, item )=> RenderAccion(item, "Instagram")
    },
    {
      title: "Twitter",
      dataIndex: "twitter",
      key: "twitter",
      align: 'center',
      render: (_, item )=> RenderAccion(item, "Twitter")
    },
    {
      title: "Whatsapp",
      dataIndex: "telefono",
      key: "telefono",
      align: 'telefono',
    },
    {
      title: "ID Evento",
      dataIndex: "idEvento",
      key: "idEvento",
      align: 'idEvento',
    },
  ];

  //Obtener grupos
  useEffect(() => {
    try {
      setCargandoEventos(true);
      onSnapshot(collection(firestore, "gruposEvento"), (querySnapshot) => {
        const docs = [];
        querySnapshot.forEach((doc) => {
          if(doc.data().estatus) {
            docs.push({ 
              ...doc.data(), 
              id: doc.id,
              key: doc.id,
              label: doc.data()?.nombre
            });
          }
        });
        setEventos(docs);
      })
    } catch (error) {
      console.log('error al cargar "grupos" de firebase: ', error);
    } finally {
      setCargandoEventos(false)
    }
  }, []);

  // Sacar usuarios que ya participaron.
  useEffect(() => {
    const _usuarios = eventoSeleccionado?.usuarios;
    if( _usuarios?.length < 1 ) {
      return
    }

    const arrUsuarios = [];
    
    _usuarios?.forEach(u => {

      const uid = u?.uid;
      const fb = u?.facebook?.replace(/\s+/g, '');
      const tw =  u?.twitter?.replace(/\s+/g, '');
      const ig = u?.instagram?.replace(/\s+/g, '');

      let cr = 0; // contador redes.

      if(fb !== "") {
        cr = cr + 1
      }
      if(tw !== "") {
        cr = cr + 1
      }
      if(ig !== "") {
        cr = cr + 1
      }

      // console.log(resultado[uid], u.nombre, cr);
      if( resultado[uid]?.length  < 1 && cr > 1 ) {
        arrUsuarios.push({
          ...u,
          ig: grupoEvento[0]?.resultado[uid].length > 0 ? false : true,
          tw: grupoEvento[1]?.resultado[uid].length > 0 ? false : true,
          fb: grupoEvento[2]?.resultado[uid].length > 0 ? false : true,
          idEvento: eventoSeleccionado?.id,
        })
      }
    });

    setUsuarios(arrUsuarios?.sort((a, b) => a?.nombre > b?.nombre ? 1 : -1));

  }, [eventoSeleccionado?.id, eventoSeleccionado?.usuarios, grupoEvento, resultado]);


  useEffect(() => {
    if(!eventoSeleccionado) {
      return
    }

    try {
      setTimeout(async () => {
        const docsRef = collection(firestore, "eventos");
        const q = firebaseQuery(docsRef, where("tag", "==", eventoSeleccionado?.tag));
        const querySnapshot = await getDocs(q);
        const docs = [];
  
        querySnapshot.forEach((doc) => {
          const _doc = doc.data();

          setResultado(_doc?.resultado);
          
          if( _doc.redSocial === 'Twitter' ) {
            docs.push({
              'red': _doc.redSocial,
              resultado: _doc?.resultado,
              urlEvento: _doc?.url,
              idEvento: doc.id ,
            });
          }
          else if( _doc.redSocial === 'Facebook' ) {
            docs.push({
              'red': _doc.redSocial,
              resultado: _doc?.resultado,
              urlEvento: _doc?.url,
              idEvento: doc.id ,
            });
          }
          else if( _doc.redSocial === 'Instagram' ) {
            docs.push({
              'red': _doc.redSocial,
              resultado: _doc?.resultado,
              urlEvento: _doc?.url,
              idEvento: doc.id ,
            });
          }
        });
  
        setGrupoEvento(docs);
  
      }, 0);
    } catch (error) {
      console.log('error al obtener grupo de evento: ', error);
    }
  }, [eventoSeleccionado]);

  return (
    <DefaultLayout>
      <Row gutter={10}>
        <Col span={24}>
          <Typography.Title level={4} children={"Selecciona un evento"} />
          <Select
            showSearch
            placeholder="Seleccione un evento"
            optionFilterProp="children"
            size='large'
            filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
            loading={cargandoEventos}
            onSelect={ (v) => {
              const evento = eventos.find(e => e.id === v);
              setEventoSeleccionado(evento); 
            }}
            style={{ width: '100%' }}
          >
            { eventos.length > 0 && eventos.map(i => (
              <Option key={i?.key} value={i?.id}>{i?.label}</Option>
            )) }
          </Select>
        </Col>
      </Row>

      <Divider />

      { eventoSeleccionado && (
        <Table 
          size="small"
          rowKey={'id'}
          columns={columns}
          pagination={false}
          dataSource={usuarios}
        />
      ) }

    </DefaultLayout>
  )
}

export default SinParticipar