import React, { useEffect, useState } from 'react';
import { 
  Layout, Col, Row, Button, message, Card, Input,
  Divider, Result, Form, Modal  
} from "antd";
import moment from 'moment';
import { Helmet } from "react-helmet-async";
import { useQuery } from '../../hooks';
import { firestore } from '../../services/firebase';
import { ViewLoading } from '../../components';
import { updateDoc, doc, getDoc } from 'firebase/firestore';
import "./Verificar.less";

const Verificar = () => {
  
  const { Header, Content, Footer } = Layout;
  const [ form ] = Form.useForm();
  const query = useQuery();
  const idUsuario = query.get("id");
  const [ cargando, setCargando ] = useState(false);
  const [ usuarioCargando, setUsuarioCargando ] = useState(true);
  const [ usuario, setUsuario ] = useState(null);
  const [ verificado, setVerificado ] = useState(false);

  const onFinish = async (values) => {
  
    const { facebook, instagram, twitter, email } = values;
  
    try {
      setCargando(true);
      let body = {
        email: email, 
        facebook: facebook,
        instagram: instagram.replace("@", ""),
        twitter: twitter.replace("@", ""),
        verificado: new Date()
      };
      await updateDoc(doc( firestore, "usuarios", idUsuario ), body )
    } catch (error) {
      console.log('Error al verificar: ', error);
    } finally {
      setCargando(false);
      window.location.reload(false);
    }
  };

  const onFinishFailed = () => {
    Modal.warning({
      title: 'Atención',
      content: 'Por favor revise los datos.',
      style: { marginTop: '20vh' },
    });
  };

  useEffect(() => {
    let mounted = true;
    if( mounted && idUsuario ) {
      try {
        setTimeout( async() => {
          const docRef = doc(firestore, "usuarios", idUsuario);
          const docSnap = await getDoc(docRef);
          setUsuario(docSnap.data());
          if( docSnap.data()?.verificado !== '' ) {
            message.success({
              content: 'EL número de teléfono ha sido verificado',
            });
            setVerificado(true)
          } else { 
            setVerificado(false)
          }
          setUsuarioCargando(false)
        }, 0);
      } catch (error) {
        console.log('error al obtener usuario: ', error);
      }
    };
    return () => mounted = false;

  }, [idUsuario]);

  useEffect(() => {
    if( usuario ) {
      form.setFieldsValue({
        ...usuario
      })
    }
  }, [form, usuario]);

  if ( usuarioCargando && !usuario ) return <ViewLoading />

  return (
    <>
      <Helmet>
        <title>Verificar usuario - LAUD</title>
      </Helmet>
      <Layout className="layout">
        <Header style={{ height: 100 }}>
          <img
            src={"/LAUD-Logotipo.png"}
            style={{ padding: 10 }}
            width={130}
            alt="Logo Laud"
          />
        </Header>
        <Content style={{ padding: "0 50px" }}>
          <Form
            name="form"
            form={form}
            autoComplete="off"
            layout="vertical"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <div className="site-layout-content">
              <Row>
                <h3>{usuario?.nombre}</h3>
              </Row>
              <Row>
                <Col span={24}>
                  <Card
                    size="large"
                    style={{ width: '100%' }}
                  >
                    
                      { !verificado ? (
                        <>
                        <Row gutter={10}>
                          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 8 }} lg={{ span: 8 }} className="gutter-row">
                            <Form.Item label="Email" name="email">
                              <Input />
                            </Form.Item>
                          </Col>
                          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 8 }} lg={{ span: 8 }} className="gutter-row">
                            <Form.Item label="Fecha registro">
                              { moment(usuario?.timestamp?.toDate()).format('DD-MM-YYYY') }
                            </Form.Item>
                          </Col>
                          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 8 }} lg={{ span: 8 }} className="gutter-row">
                            <Form.Item label="Ciudad">
                              {usuario?.ciudad}
                            </Form.Item>
                          </Col>
                        </Row>

                        <Row gutter={10}>
                          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 8 }} lg={{ span: 8 }} className="gutter-row">
                            <Form.Item label="Fecha registro">
                              { moment(usuario?.timestamp?.toDate()).format('DD-MM-YYYY') }
                            </Form.Item>
                          </Col>
                          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 8 }} lg={{ span: 8 }} className="gutter-row">
                            <Form.Item label="Teléfono">
                              {usuario?.telefono}
                            </Form.Item>
                          </Col>
                          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 8 }} lg={{ span: 8 }} className="gutter-row">
                            <Form.Item label="Genero">
                              {usuario?.genero === 'h' ? 'Masculino' : 'Femenino'}
                            </Form.Item>
                          </Col>
                        </Row>

                        <Row gutter={10}>
                          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 8 }} lg={{ span: 8 }} className="gutter-row">
                            <Form.Item label="Twitter" name="twitter">
                              <Input prefix="@" />
                            </Form.Item>
                          </Col> 
                          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 8 }} lg={{ span: 8 }} className="gutter-row">
                            <Form.Item label="Instagram" name="instagram">
                            <Input prefix="@" />
                            </Form.Item>
                          </Col>  
                          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 8 }} lg={{ span: 8 }} className="gutter-row">
                            <Form.Item label="Facebook" name="facebook">
                              <Input />
                            </Form.Item>
                          </Col>
                        </Row>

                        </>
                      ) : null}


                    { verificado ? (
                      <Result
                        status="success"
                        title="Tu usuario ya ha sido verificado con tu número de teléfono"
                        subTitle="Pronto comenzarás a recibir notificaciones de la red Laud"
                      />
                    ) : null }

                    { !verificado ? (
                      <>
                        <Divider />
                        <Button
                          loading={cargando}
                          size='large'
                          block
                          htmlType="submit"
                          type='primary'
                        >
                          Verificar
                        </Button>
                      </>
                    ) : null }
                  

                  </Card>
                </Col>
              </Row>
            </div>
          </Form>
        </Content>
        <Footer
          style={{
            textAlign: "center",
          }}
        >
          Derechos reservados {new Date().getFullYear()} &#xa9; - v1.0.0
        </Footer>
      </Layout>
    </>
  );
};

export default Verificar;