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

const ResultadoEventoAccion = () => {

  const query = useQuery();
  const id = query.get("id");
  const url = "/administracion/eventos";
  const history = useHistory();
  const [ evento, setEvento ] = useState(null);
  const [ filteredResults, setFilteredResults ] = useState([])
  const [ searchInput, setSearchInput ] = useState('');

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

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

    if( evento?.resultado[item?.uid]?.includes(val) ) {
      return (
        <Tooltip 
          title="Se verificó participación."
          onClick={() => window.open(url2, '_blank')}
        >
          <CheckCircleOutlined style={{ color: '#33ca3a', fontSize: 24 }} />
        </Tooltip>
      )
    } else {
      return (
        <Tooltip
          title="Reenviar enlace 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: "Recibió",
      dataIndex: "recibio",
      key: "recibio",
      align: 'center',
      render: (_, item )=> RenderAccion(item, "recibio")
    },
    {
      title: "Click",
      dataIndex: "click",
      key: "click",
      align: 'center',
      render: (_, item )=> RenderAccion(item, "click")
    },
    {
      title: "Me gusta",
      dataIndex: "likes",
      key: "likes",
      align: 'center',
      render: (_, item )=> RenderAccion(item, "likes")
    },
    {
      title: "Compartir",
      dataIndex: "shares",
      key: "shares",
      align: 'center',
      render: (_, item )=> RenderAccion(item, "shares")
    },
    {
      title: "Comentario",
      dataIndex: "comments",
      key: "comments",
      align: 'center',
      render: (_, item )=> RenderAccion(item, "comments")
    },
    {
      title: "Retweets",
      dataIndex: "retweets",
      key: "retweets",
      align: 'center',
      render: (_, item )=> RenderAccion(item, "retweets")
    },
  ];

  const multipleButtonData = [
    {
      text: "Volver",
      to: () => history.push(url),
      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 onSearch = (searchValue) => {
    setSearchInput(searchValue);
    if( searchValue !== '' ) {
      const filteredData = evento?.usuarios?.filter((item) => {
        return Object.values(item).join('').toLowerCase().includes(searchValue.toLowerCase());
      })
      setFilteredResults(filteredData)
    } else {
      setFilteredResults(evento?.usuarios)
    }
  };

  const generarReporte = async () => {
    try {
      const datos = [];
      const usuarios = evento?.usuarios;
      for( let i = 0; i < usuarios.length; i++ ) {
        datos.push({
          nombre: usuarios[i]?.nombre,
          recibio: evento?.resultado[usuarios[i].uid]?.includes('recibio') ? 1 : 0,
          click: evento?.resultado[usuarios[i].uid]?.includes('click') ? 1 : 0,
          likes: evento?.resultado[usuarios[i].uid]?.includes('likes') ? 1 : 0,
          shares: evento?.resultado[usuarios[i].uid]?.includes('shares') ? 1 : 0,
          comments: evento?.resultado[usuarios[i].uid]?.includes('comments') ? 1 : 0,
          retweets: evento?.resultado[usuarios[i].uid]?.includes('retweets') ? 1 : 0,
        })
      }

      await exportarExcelJS(
        columns, 
        datos, 
        'reporte evento acción', 
        evento?.nombre, 
        `Descripción: ${evento?.descripcion} - Red social: ${evento?.redSocial} `, 
        '/LAUD-Logotipo.png',
        ""
      )
    } catch (error) {
      console.log('error al generar reporte: ', error)
    }
  };
  
  // 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());
        }, 0);
      } catch (error) {
        console.log('error al obtener evento: ', error);
      }
    };
    return () => mounted = false;
  }, [id] );

  if( !evento ) return <ViewLoading />;

  return (
    <SimpleTableLayout
      title="Resultados por acciones"
      multipleButtonData={multipleButtonData}
      onSearchClicked={onSearch}
    >
      <>
      <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'}
            pagination={false}
            size="small"
            columns={columns}
            dataSource={ searchInput.length > 1 ? filteredResults : evento?.usuarios?.sort((a, b) => a?.nombre > b?.nombre ? 1 : -1) }
          />
        </Col>
      </Row>
      </>
    </SimpleTableLayout>
  )
}

export default ResultadoEventoAccion