import React, { useState, useEffect } from 'react'
import {Row, Col, Table, Divider, Tooltip } from "antd"
import { RedoOutlined, ArrowLeftOutlined, CheckCircleOutlined, FileExcelOutlined, MinusOutlined } from '@ant-design/icons'
import { doc, getDoc, query as firebaseQuery, where, collection, getDocs } from 'firebase/firestore'
import { useQuery } from '../../../hooks'
import { firestore } from '../../../services/firebase'
import { useHistory } from 'react-router-dom'
import { ViewLoading } from '../../../components'
import { SimpleTableLayout } from '../../../components/layouts'
import exportarExcelJS from '../../../services/exportarExcel'
import 'moment/locale/es-mx'

const ResultadoGrupoEvento = () => {

  const query = useQuery();
  const id = query.get('id');
  const tag = query.get('tag');
  const history = useHistory();
  const [evento, setEvento] = useState(null);
  const [grupoEvento, setGrupoEvento] = useState([])
  const [filteredResults, setFilteredResults] = useState([]);
  const [searchInput, setSearchInput] = useState('');
  const [usuarios, setUsuarios] = useState([]);

  const defaultText = prop => prop || <span style={{ color: '#c7c3c3' }}>---</span>;
  
  const RenderAccion = (item, redSocial) => {

    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 < grupoEvento?.length; i ++ ) {
      if( grupoEvento[i]?.red === redSocial ) {

        const urlEvento = `https://laud-red.web.app/evento-laud?id=${grupoEvento[i]?.idEvento}&uid=${item?.uid}`;
        const tel = '+52'+item?.telefono;
        const waParams1 = `Hola, aún falta tu participación en el siguiente evento en ${redSocial}: ${urlEvento}`;
        const waParams2 = `Hola, gracias por haber participado en el evento de ${redSocial }:  *"${evento?.nombre}"*`;
        const url1 = `https://wa.me/${tel}?text=${encodeURIComponent(waParams1)}`;
        const url2 = `https://wa.me/${tel}?text=${encodeURIComponent(waParams2)}`;
        

        if( grupoEvento[i]?.resultado[idUsuario]?.length > 0) {
          return (
            <Tooltip
              title={`Se verificó participación con alguna de las siguientes acciones: ${evento?.accion.join()}`}
              onClick={() => window.open(url2, '_blank')}
            >
              <CheckCircleOutlined style={{ color: '#33ca3a', fontSize: 24 }} />
            </Tooltip>
          )
        } else {
          return (
            <Tooltip
              title="Reenviar elace del evento."
              onClick={() => window.open(url1, '_blank')}
            >
              <RedoOutlined 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")
    },
  ];

  const multipleButtonData = [
    {
      text: "Volver",
      to: () => history.goBack(),
      icon: <ArrowLeftOutlined />,
      props: { disabled: false, type: 'primary' }
    },
    {
      text: "Generar reporte",
      to: () => generarReporte(),
      icon: <FileExcelOutlined />,
      props: { disabled: false, style: { background: '#107038', color: '#fff', border: 'none' } }
    }
  ];

  const generarReporte = async () => {
    try {
      const datos = [];
      const usuarios = evento?.usuarios;

      // const arrRedes = evento?.redes?.map( i => (
      //   i?.redSocial?.toLowerCase()
      // ))
 
      // if( !arrRedes.includes('facebook') ) {
      //   for(let i = 0; i < columns.length; i++) {
      //     if( columns[i].key === 'facebook' ) {
      //       columns.splice(i, 1);
      //       break;
      //     }
      //   }
      // }
      // else if( !arrRedes.includes('instagram') ) {
      //   for(let i = 0; i < columns.length; i++) {
      //     if( columns[i].key === 'instagram' ) {
      //       columns.splice(i, 1);
      //       break;
      //     }
      //   }
      // }
      // else if( !arrRedes.includes('twitter') ) {
      //   for(let i = 0; i < columns.length; i++) {
      //     if( columns[i].key === 'twitter' ) {
      //       columns.splice(i, 1);
      //       break;
      //     }
      //   }
      // } 

      for( let u = 0; u < usuarios?.length; u++) {
        let item ={
          nombre: usuarios[u].nombre,
        }

        const idUsuario = usuarios[u]?.uid;
        for(let i = 0; i < grupoEvento?.length; i++ ) {
          if( grupoEvento[i]?.red === 'Instagram' ) {

            let val = null;
            if( usuarios[u]?.instagram !== "" ) {
              val = grupoEvento[i]?.resultado[idUsuario]?.length > 0 ? 1 : 0
            } else {
              val = "na"
            }

            item = {
              ...item,
              instagram: val,
            }
          }
          else if ( grupoEvento[i]?.red === 'Facebook' ) {

            let val = null;
            if( usuarios[u]?.facebook !== "" ) {
              val = grupoEvento[i]?.resultado[idUsuario]?.length > 0 ? 1 : 0
            } else {
              val = "na"
            }

            item = {
              ...item,
              facebook: val,
            }
          }
          else if( grupoEvento[i]?.red === 'Twitter' ) {

            let val = null;
            if( usuarios[u]?.twitter !== "" ) {
              val = grupoEvento[i]?.resultado[idUsuario]?.length > 0 ? 1 : 0
            } else {
              val = "na"
            }

            item = {
              ...item,
              twitter: val,
            }
          } 
        }
        datos.push( item )
      }

    
      await exportarExcelJS(
        columns, 
        datos, 
        'reporte grupo de evento', 
        evento?.nombre, 
        `Descripción: ${evento?.descripcion} - Grupo: ${evento?.tag}`, 
        '/LAUD-Logotipo.png',
        ""
      )
    } catch (error) {
      console.log('error al generar reporte: ', error)
    }
  };

  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)
    }
  };

  // Obtener detalles del evento.
  useEffect(() => {
    let mounted = true;
    if(mounted) {
      try {
        setTimeout(async () => {
          const docRef = doc(firestore, "eventos", id);
          const docSnap = await getDoc(docRef);
          setEvento(docSnap.data());
          
          const _usuarios = docSnap.data()?.usuarios?.map( (u, i) => ({
            ...u,
            index: i + 1
          }))

          setUsuarios(_usuarios)

        },0);
      } catch (error) {
        console.log('error al obtener eventos: ', error);
      }
    }
    return () => mounted = false;
  }, [id]);

  // Obtener grupo de eventos(por tag).
  useEffect(() => {
    let mounted = true;
    if(mounted) {
      try {
        setTimeout(async () => {
          const docsRef = collection(firestore, "eventos");
          const q = firebaseQuery(docsRef, where("tag", "==", tag));
          const querySnapshot = await getDocs(q);
          const docs = [];
          querySnapshot.forEach((doc) => {
            const _doc = doc.data();
            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 eventos: ', error)
      }
    }

    return () => mounted = false;
  }, [tag]);

  if(!evento) return <ViewLoading />;

  return (
    <SimpleTableLayout
      multipleButtonData={multipleButtonData}
      onSearchClicked={onSearch}
    >
      <>        
        <Divider />
        <Row gutter={[10, 10]}>
          <Col span={20}>
            <h2>{evento?.nombre}</h2>
          </Col>
          <Col span={4} style={{ textAlign: 'right' }}>
            <img src={ evento ? '/assets/'+evento?.redSocial+'.png' : '' } width='50' alt="Red social" />
          </Col>
        </Row>
        
        <Divider />

        <Row gutter={[10, 10]}>
          <Col span={24}>
            <Table
              rowKey={'id'}
              size="small"
              pagination={false}
              columns={columns}
              dataSource={ searchInput?.length > 1 ? filteredResults : usuarios?.sort((a, b) => a?.nombre > b?.nombre ? 1 : -1) }
            />
          </Col>
        </Row>
      </>
    </SimpleTableLayout>
  )
}

export default ResultadoGrupoEvento