import React, { useEffect, useState, useCallback } from 'react';
import { Table, Modal, Button, message, Input, Row, Col, Tabs,  Divider } from 'antd';
import { EditOutlined, DeleteOutlined, BarChartOutlined, PlusCircleOutlined, ExclamationCircleOutlined, DeliveredProcedureOutlined } from "@ant-design/icons";
import { useHistory } from 'react-router-dom';
import moment from 'moment';
import { firestore } from "../../../services/firebase";
import { ActionsButton } from '../../../components';
import { SimpleTableLayout } from '../../../components/layouts';
import { collection, limit, orderBy, updateDoc, doc, getDocs, query, where, addDoc } from "firebase/firestore";
import { useAuth } from '../../../hooks';

const { REACT_APP_WEB_URL } = process.env;

const EventosListado = () => {

  const { TextArea } = Input;
  const { session } = useAuth()
  const titulo = "Eventos";
  const url = "/administracion/eventos";
  const history = useHistory();
  const { confirm } = Modal;
  
  const [ eventos, setEventos ] = useState([]);
  const [ grupoEventos, setGrupoEventos ] = useState([]);
  const [ filteredResults, setFilteredResults ] = useState([]);
  const [ searchInput, setSearchInput ] = useState('');
  const [ visible, setVisible ] = useState(false);
  const [ textAreaData, setTextAreaData ] = useState('');
  const [ evento, setEvento ] = useState(null);
  const [ procesando, setProcesando ] = useState(false);
  const [ eventosPorPagina, setEventosPorPagina] = useState(10);
  const [ currentPage, setCurrentPage] = useState(1);
  
  const defaultText = prop => prop || <span style={{ color: '#c7c3c3' }}>---</span>;

  const pageSizeOptions = ['10', '20', '30', '40', '50', '60', '70', '80'];

  const columnasEventos = [
    {
      title: "Acciones",
      dataIndex: "id",
      key: "id",
      align: "center",
      width: 100,
      render: (_, item ) => (
        <ActionsButton
          key={item}
          options={[
            {
              name: "Editar",
              icon: <EditOutlined />,
              onClick: () => history.push(url+'/detalle?id='+item.id)
            },
            {
              name: "Ver resultados",
              disabled: !item?.resultado,
              icon: <BarChartOutlined />,
              onClick: () => history.push(url+'/resultado-acciones?id='+item?.id),
            },
            {
              name: "Procesador",
              icon: <DeliveredProcedureOutlined />,
              onClick: () => {
                setVisible(true);
                setEvento(item);
              },
              styleProps: { color: '#009688' },
            },
            {
              name: "Eliminar",
              icon: <DeleteOutlined />,
              onClick: () => eliminarRegistro(item, 'eventos'),
              styleProps: { color: '#e91e63' },
            },
          ]}
        />
      )
    },
    {
      title: "Nombre",
      dataIndex: "nombre",
      key: "nombre",
      render: defaultText,
    },
    {
      title: "Red social",
      dataIndex: "redSocial",
      key: "redSocial",
      align: 'center',
      render: ( _, item ) => (
        <img src={  '/assets/'+item?.redSocial+'.png'  } width='40' alt="Red social" />
      ),
    },
    {
      title: "Creado",
      dataIndex: "timestamp",
      key: "timestamp",
      render: (_, item) => (
        moment(item?.timestamp?.toDate()).format('DD-MM-YYYY')
      ),
    },
    {
      title: 'URL Laud', 
      dataIndex: "id",
      key: "id",
      align: "center",
      width: 100,
      render: (_, item ) => (
        <Button
          type='link'
          onClick={ () => obtenerEnlaceYager(item) }
        >
          <img src="/assets/LAUD-Avatar.png" width='40' alt="icono" style={{ position: 'relative', marginTop: -11  }} />
        </Button>
      )
    }
  ];

  const columnasGrupos = [
    {
      title: "Acciones",
      dataIndex: "id",
      key: "id",
      align: "center",
      width: 100,
      render: (_, item ) => (
        <ActionsButton
          key={item}
          options={[
            {
              name: "Editar",
              icon: <EditOutlined />,
              onClick: () => history.push(`${url}/detalleGrupo?id=${item?.id}&tag=${item?.tag}`)
            },
            {
              name: "Eliminar",
              icon: <DeleteOutlined />,
              onClick: () => eliminarRegistro(item, 'gruposEvento'),
              styleProps: { color: '#e91e63' },
            },
          ]}
        />
      )
    },
    {
      title: "Nombre",
      dataIndex: "nombre",
      key: "nombre",
      render: defaultText,
    },
    {
      title: "Redes",
      dataIndex: "redes",
      key: "redes",
      align: 'center',
      render: ( _, item ) => {
        return item?.redes.map( (i, index) => Array.from(item.redes.keys()).pop() !== index ? i.redSocial + ', ' : i.redSocial + '' )        
      },
    },
    {
      title: "Creado",
      dataIndex: "timestamp",
      key: "timestamp",
      render: (_, item) => (
        moment(item?.timestamp?.toDate()).format('DD-MM-YYYY')
      ),
    },
    {
      title: "Grupo",
      dataIndex: "tag",
      key: "tag",
    },
  ];

  const multipleButtonData = [
    {
      text: "Agregar",
      to: () => history.push(url+'/nuevo'),
      icon: <PlusCircleOutlined />,
      props: { disabled: false, type: 'primary', }
    }, 
  ];
 
  const ModalProcesar = () => {
    return (
      <Modal
        title="Procesar"
        centered
        open={visible}
        okText="Procesar"
        confirmLoading={procesando}
        onOk={(e) => {
          if (textAreaData === "") {
            message.warning({
              content: "Atención: no dejar vacio",
            });
            return;
          }
          procesarUsuarios();
          guardarRegistro();
        }}
        onCancel={() => {
          setVisible(false);
        }}
        width={1000}
      >
        <Row>
          <Col span={24}>
            <TextArea
              onChange={(e) => setTextAreaData(e.target.value)}
              placeholder="Pegue el texto aqui"
              rows={6}
            />
          </Col>
        </Row>
      </Modal>
    );
  };

  const TablaGrupos = () => {
    return (
      <Table
        dataSource={searchInput.length > 1 ? filteredResults : grupoEventos}
        rowKey={"id"}
        columns={columnasGrupos}
        size='small'
        scroll={{ x: 700 }}
        pagination={{ 
          current: currentPage,
          defaultPageSize: eventosPorPagina, 
          showSizeChanger: true, 
          pageSizeOptions: pageSizeOptions,
          onChange: (page, pageSize) => {
            setCurrentPage(page)
            setEventosPorPagina(pageSize)
          }
        }}
      />
    )
  };

  const TablaEventos = () => {
    return (
      <Table
        dataSource={searchInput.length > 1 ? filteredResults : eventos}
        rowKey={"id"}
        columns={columnasEventos}
        size='small'
        scroll={{ x: 700 }}
        pagination={{ 
          current: currentPage,
          defaultPageSize: eventosPorPagina, 
          showSizeChanger: true, 
          pageSizeOptions: pageSizeOptions,
          onChange: (page, pageSize) => {
            setCurrentPage(page)
            setEventosPorPagina(pageSize)
          }
        }}
      />
    )
  };
   
  function b64_to_utf8( str ) {
    return decodeURIComponent(escape(window.atob( str )));
  };

  const guardarRegistro = async () => {
    try {

      const json = JSON.parse(textAreaData);
      const accion =  b64_to_utf8(json.accion).split(".");  
      const lista = json[json.tipo][accion[0]];

      const body = {
        json: textAreaData,
        accion: accion,
        lista: lista,
        timestamp: new Date(),
        evento: evento,
        usuario: {
          uid: session?.uid,
          email: session?.email,
          displayName: session?.displayName,
        }
      }
      await addDoc(collection(firestore, "procesos"), body);
    } catch (error) {
      console.log('error al guardar registro: ', error);
    }
  };

  const procesarUsuarios = async () => {
    try {
      setProcesando(true)
      const usuarios = await obtenerUsuariosGrupo();

      const json = JSON.parse(textAreaData);
      const accion =  b64_to_utf8(json.accion).split(".");  
      const lista = json[json.tipo][accion[0]];

      if( json?.tipo !==  evento?.redSocial?.toLowerCase() ) {
        message.warning({
          content: 'La red social es incorrecta',
        });
        return
      }

      let resultado = {...evento.resultado};
      for( let u = 0; u < usuarios?.length; u++ ) {
        let usuarioTipo = usuarios[u][json.tipo]?.toLowerCase();

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

        if( usuarioTipo?.toLowerCase() ) {
          for( let i = 0; i < lista.length; i++ ) {       
            const nick = lista[i]?.replace("@", "").toLowerCase();

            if(nick?.includes(usuarios[u][json.tipo])) {
              if( !resultado[usuarios[u]?.uid].includes(accion[0]) ) {
                resultado[usuarios[u]?.uid].push(accion[0])
              }
            }
          }
        }
      }

      let body = {
        usuarios,
        resultado,
      }

      await updateDoc(doc(firestore, "eventos", evento?.id), body);
      if(evento?.tag){ 
        history.push( url+'/resultado-grupo-evento?id='+evento?.id+"&tag="+evento?.tag);
      } else  {
        history.push( url+'/resultado?id='+evento?.id);
      }
      setVisible(false);

    } catch (error) {
      console.log('Error al procesar: ', error);
      message.warning({
        content: 'Atención: hubo un problema al procesar la información',
      });
    }  finally {
      setProcesando(false);
    };


  };

  const obtenerUsuariosGrupo = async () => {

    const _grupos = evento?.grupos;

    // Verificar que el evento no tenga grupos
    if( _grupos?.length === 0 ) {
      message.warning({
        content: 'Atención: el evento no tiene grupos.',
      });
      return
    };

    try {
      
      const q = query(collection(firestore, "usuarios"), where('grupos', 'array-contains-any',  _grupos ));
      const querySnapshot = await getDocs(q);
      const docs = []

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

    } catch (error) {
      console.log('error al obtener grupos: ', error);
    }

  };

  const obtenerEnlaceYager = (item) => {
    const url = REACT_APP_WEB_URL+'evento-laud?id='+item?.id;
    navigator.clipboard.writeText(url);
    message.info({
      content: 'Se ha copiado el enlace al portapapeles.',
    });
  };


  // TODO eliminar elemto del array y quitar window location
  const eliminarRegistro = async (item, docs) => {
    confirm({
      title: `Atención`,
      icon: <ExclamationCircleOutlined />,
      content: '¿Seguro que desea eliminar este registro?',
      onOk: async () => {
        try {
          await updateDoc(doc(firestore, docs, item?.id), {estatus: false}); 
        } catch (error) {
          console.log('error al eliminar: ', error);
        } finally {
          window.location.reload(false);
        }
      },
      onCancel() {},
    });
  };

  const onSearch = (searchValue) => {
    setSearchInput(searchValue);
    if( searchValue !== '' ){
      const filteredData = eventos.filter((item) => {
        return Object.values(item).join('').toLowerCase().includes(searchValue.toLowerCase());
      })
      setFilteredResults(filteredData);
    }else{
      setFilteredResults(eventos)
    }
  };

  const obtenerRegistrosFirebase =  useCallback(async (coleccion) => {

    if(!coleccion) {
      console.log('Se necesita coleccion');
      return
    }

    try {
      const ref = collection(firestore, coleccion);
      const q = query(ref, orderBy("timestamp", "desc"), limit(eventosPorPagina));
      const querySnapshot = await getDocs(q);
      const docs = [];
      querySnapshot.forEach((doc) => {
        if( doc.data()?.estatus ) { 
          docs.push({ ...doc.data(), id: doc.id });
        }
      });
      return docs;
    } catch (error) {
      console.log('error al obtener datos: ', error);
    }
  }, [eventosPorPagina]);

  useEffect(() => {
    setTimeout(async () => {
      const eventos = await obtenerRegistrosFirebase("eventos");
      const gruposEvento = await obtenerRegistrosFirebase("gruposEvento");

      setEventos(eventos);
      setGrupoEventos(gruposEvento)

    }, 0);
  }, [obtenerRegistrosFirebase]);

  return (
    <SimpleTableLayout
      title={titulo}
      multipleButtonData={multipleButtonData}
      onSearchClicked={onSearch}
      children={
        <>
          <ModalProcesar />
          <Divider />
          <Tabs
            type="card"
            defaultActiveKey="1"
            items={[
              {
                label: `Eventos por grupo`,
                key: "1",
                children: <TablaGrupos />,
              },
              {
                label: `Eventos`,
                key: "2",
                children: <TablaEventos />,
              },
            ]}
          />
        </>
      }
    />
  );
}

export default EventosListado