import React, { useEffect, useState } from 'react';
import { Table, Modal, Button, message,  Row, Col } from 'antd'
import { firestore } from '../../../services/firebase';
import { Link } from 'react-router-dom';
import { SimpleTableLayout } from '../../../components/layouts';
import { collection, onSnapshot, doc, updateDoc } from 'firebase/firestore';
import { ExclamationCircleOutlined, FileExcelOutlined,  CloseOutlined, CheckCircleOutlined } from '@ant-design/icons';
import exportarExcelJS from '../../../services/exportarExcel';
import moment from 'moment';

const UsuariosRedes = () => {

  const titulo = "Usuarios: Redes sociales";
  const url = "/administracion/usuarios";

  const [cargandoUsuarios, setCargandoUsuarios] = useState(true);
  const [usuarios, setUsuarios] = useState([]);
  const [filteredResults, setFilteredResults] = useState('');
  const [searchInput, setSearchInput] = useState('');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalData, setModalData] = useState(null);

  const abrirEnlace = (val, red) => {
    window.open(`https://${red}.com/${val}`, '_blank');
  };

  const validarRed = (usuarioRed, estatusRed, red) => {

    let mensajeConfirmacion = "";
    if( estatusRed ) {
      mensajeConfirmacion = `¿Confirmas que el usuario ${usuarioRed} de la red ${red} NO es correcto ?`;
    } else (
      mensajeConfirmacion = `¿Confirmas que el usuario ${usuarioRed} de la red ${red} es correcto ?`
    )

    Modal.confirm({
      title: 'Atención',
      icon: <ExclamationCircleOutlined />,
      content: mensajeConfirmacion,
      okText: 'Confirmar',
      cancelText: 'Cancelar',
      onOk: async () => {

        try {
          const body = {
            ...modalData,
          }

          if( red === 'facebook' ) {
            body['facebookVerificado'] = !estatusRed;
          } else if ( red === 'twitter' ) {
            body['twitterVerificado'] = !estatusRed;
          } else if ( red === 'instagram') {
            body['instagramVerificado'] = !estatusRed;
          }
          
          await updateDoc(doc(firestore, "usuarios", modalData?.uid), body);  
          message.success("Red social actualizada.");
          setIsModalOpen(false);
          setModalData(null);
          setSearchInput("");

        } catch (error) {
          console.log('error al validar: ', error)
          Modal.warning({
            title: 'Error',
            content: 'Hubo un problema al verificar.',
          });
        }        
      }
    });
  };

  const cambiarValidacion = (red) => {
    if(!red) {
      return "error!";
    }

    let estatusRed = false;
    let usuarioRed = "";
    if(red === "instagram") {
      estatusRed = modalData?.instagramVerificado;
      usuarioRed = modalData?.instagram;
    } 
    else if (red === "facebook") {
      estatusRed = modalData?.facebookVerificado;
      usuarioRed = modalData?.facebook;
    } 
    else if ( red === "twitter" ) {
      estatusRed = modalData?.twitterVerificado;
      usuarioRed = modalData?.twitter;
    }
    validarRed(usuarioRed, estatusRed, red);
  } 

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

  const columns = [
    {
      title: "Validar redes",
      dataIndex: "nombre",
      key: "nombre",
      render: (_, item) => (
        <Button
          onClick={() => {
            setIsModalOpen(true);
            setModalData(item)
          }}
        >
          Validar redes
        </Button>
      ),
    },
    {
      title: "Nombre",
      dataIndex: "nombre",
      key: "nombre",
      render: (_, item) => (
        <Link to={`${url}/detalle?id=${item.id}`}> {item.nombre} </Link>
      ),
    },
    {
      title: "Facebook",
      dataIndex: "facebook",
      key: "facebook",
      render: (_, item) => (
        <Button
          type="link"
          style={{ color: "#0165E1" }}
          onClick={() => abrirEnlace(item?.facebook, "facebook")}
        >
          {item?.facebook} &nbsp;
          {item?.facebookVerificado && (<img src="/assets/verificado.png" width={13} alt="Red social verificada"/>)}
        </Button>
      ),
    },
    {
      title: "Instagram",
      dataIndex: "instagram",
      key: "instagram",
      render: (_, item) => (
        <Button
          type="link"
          style={{ color: "#E1306C" }}
          onClick={() => abrirEnlace(item?.instagram, "instagram")}
        >
          {item?.instagram} &nbsp;
          {item?.instagramVerificado && (<img src="/assets/verificado.png" width={13} alt="Red social verificada"/>)}
        </Button>
      ),
    },
    {
      title: "Twitter",
      dataIndex: "twitter",
      key: "twitter",
      render: (_, item) => (
        <Button
          type="link"
          style={{ color: "#1D9BF0" }}
          onClick={() => abrirEnlace(item?.twitter, "twitter")}
        >
          {item?.twitter} &nbsp;
          {item?.twitterVerificado && (<img src="/assets/verificado.png" width={13} alt="Red social verificada"/>)}
        </Button>
      ),
    },
  ];

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

  const generarReporte = async () => {
    try {
      const dataExcel = [];
      for( let i = 0; i < usuarios?.length; i++ ) {
        dataExcel.push({
          nombre: usuarios[i]?.nombre,
          facebook: usuarios[i]?.facebook,
          instagram: usuarios[i]?.instagram,
          twitter: usuarios[i]?.twitter,
          fb: usuarios[i]?.facebookVerificado ? 'Verificado' : '---',
          ig: usuarios[i]?.instagramVerificado ? 'Verificado' : '---',
          tw: usuarios[i]?.twitterVerificado ? 'Verificado' : '---',
        })
      };

      const columnasExcel = [
        {
          title: "Nombre",
          dataIndex: "nombre",
          key: "nombre",
        },
        {
          title: "Facebook",
          dataIndex: "facebook",
          key: "facebook",
        },
        {
          title: "Instagram",
          dataIndex: "instagram",
          key: "instagram",
        },
        {
          title: "Twitter",
          dataIndex: "twitter",
          key: "twitter",
        },
        {
          title: "Facebook",
          dataIndex: "fb",
          key: "fb",
        },
        {
          title: "Instagram",
          dataIndex: "ig",
          key: "ig",
        },
        {
          title: "Twitter",
          dataIndex: "tw",
          key: "tw",
        },
      ];
      
      await exportarExcelJS(
        columnasExcel,
        dataExcel,
        `usuarios-redes-${moment(new Date()).format('DD-MM-YYYY')}`,
        `Redes Sociales `,
        `Fecha ${moment(new Date()).format('DD-MM-YYYY')}`,
        `/LAUD-Logotipo.png`,
        ""
      )
    } catch (error) {
      console.log('error al generar reporte: ', error)
    }
  };

  // Encontrar duplicados
  useEffect(() => {
  
    const busqueda = usuarios.reduce(( acc, usuario ) => {
      if( usuario?.twitter !== "") {
        acc[usuario?.twitter] = ++acc[usuario?.twitter] || 0;
      }
      return acc
    }, {});

    usuarios.filter( (persona) => {
      return busqueda[persona?.twitter]
    });

  }, [usuarios]);

  // Obtener usuarios
  useEffect(() => {
    try {
      onSnapshot(collection(firestore, "usuarios"), (querySnapshot) => {
        const docs = [];
        querySnapshot.forEach((doc) => {
          if( doc.data().estatus ) {
            docs.push({ ...doc.data(), id: doc?.id });
          }
        });
        setUsuarios(docs?.sort((a, b) => a?.nombre > b?.nombre ? 1 : -1));
      });
    } catch (error) {
      console.log('error al cargar datos de firebase: ', error);
    } finally {
      setCargandoUsuarios(false)
    }
  }, []);

  return (
    <SimpleTableLayout
      title={titulo}
      onSearchClicked={onSearch}
      multipleButtonData={multipleButtonData}
    >
      <Modal 
        title="Actualizar redes" 
        open={isModalOpen} 
        onOk={() => setIsModalOpen(false)}
        onCancel={() => setIsModalOpen(false)}
        okButtonProps={{ style: { display: 'none' } }}
      >
        <Row gutter={10}>
          <Col span={18}>
            { modalData?.facebook && `Facebook: ${modalData?.facebook}`  } <br />
            { modalData?.twitter && `Twitter: ${modalData?.twitter}`  } <br />
            { modalData?.instagram && `Instagram: ${modalData?.instagram}`  } <br />
          </Col>
          <Col span={6}>
            {modalData?.facebook ? (
              <Button 
                type={ modalData?.facebookVerificado ? "dashed" :  "primary" }
                icon={ modalData?.facebookVerificado ? <CloseOutlined /> : <CheckCircleOutlined /> }
                size="small"
                block
                onClick={() => cambiarValidacion('facebook')}
              >{ modalData?.facebookVerificado ? 'Quitar' : 'Validar' }</Button>
            ) : <br />}

            {modalData?.twitter ? (
              <Button 
                type={ modalData?.twitterVerificado ? "dashed" :  "primary" }
                icon={ modalData?.twitterVerificado ? <CloseOutlined /> : <CheckCircleOutlined /> }
                size="small"
                block
                onClick={() => cambiarValidacion('twitter')}
              >{ modalData?.twitterVerificado ? 'Quitar' : 'Validar' }</Button>
              ) : <br />}

            {modalData?.instagram ? (
              <Button 
                type={ modalData?.instagramVerificado ? "dashed" :  "primary" }
                icon={ modalData?.instagramVerificado ? <CloseOutlined /> : <CheckCircleOutlined /> }
                size="small"
                block
                onClick={() => cambiarValidacion('instagram')}
              >{ modalData?.instagramVerificado ? 'Quitar' : 'Validar'}</Button>
              ) : <br />}
          </Col>
        </Row>
      </Modal>
      <Table
        dataSource={searchInput.length > 1 ? filteredResults : usuarios}
        rowKey={"id"}
        loading={cargandoUsuarios}
        pagination={false}
        columns={columns}
        size='small'
        scroll={{ x: 700 }}
      />
    </SimpleTableLayout>
  )
}

export default UsuariosRedes