import React, { useEffect, useState } from 'react'
import { Row, Form, Col, Button, DatePicker, Select, notification, Modal, Spin} from 'antd'
import { DefaultLayout } from '../../../components/layouts'
import { ClearOutlined, FileExcelOutlined } from "@ant-design/icons"
// import { collection, getDocs, query, orderBy, where } from 'firebase/firestore'
// import { firestore } from '../../../services/firebase'
import HighchartsReact from "highcharts-react-official"
import Highcharts from "highcharts"
import exportarExcelJS from '../../../services/exportarExcel'
import moment from 'moment'
import { useModels } from '../../../hooks'
import HttpService from '../../../services/httpService'

const { RangePicker } = DatePicker;

const Individual = () => {

  const [form] = Form.useForm();
  const [ cargandoReporte, setCargandoReporte ] = useState(false);
  // const [ cargandoUsuarios, setCargandoUsuarios ] = useState(true);
  // const [ usuarios, setUsuarios ] = useState([]);
  const [ resultado, setResultado ] = useState({
    atendidos: 0,
    incompletos: 0,
    totales: 0
  });
  const [ usuario, setUsuario ] = useState([]);

  const [timer, setTimer] = useState(null);
  const [ buscarValue, setBuscarValue ] = useState('');
  const [ requestUsuarios, setRequestUsuarios ] = useState({});
  const [ importLoading, setImportLoading ] = useState(false);
  const [ totalUsuarios, setTotatlUsuarios ] = useState(0);
  const [ actuales, setActuales ] = useState(0);

  const usuarioExtraParams = React.useMemo(() => ({ q: buscarValue }), [buscarValue])
  const usuariosParams = React.useMemo(() => ({
    name: 'v1/usuario',
    limite: 20,
    ordenar: 'nombre-asc',
    expand: 'grupos',
    extraParams: usuarioExtraParams
  }), [usuarioExtraParams])

  const [
    models,
    modelsLoading, , ,
  ] = useModels(requestUsuarios);

  const onSearchUsuarios = (value) => {
    clearTimeout(timer);
    const newTimer = setTimeout(() => {
      setBuscarValue(value);
    }, 300);

    setTimer(newTimer);
  };

  const generateDefaultChartOptions = (chartType = "pie", options = {}, callback) => ({
    chart: {
      type: chartType,
      inverted: options.inverted || false,
      options3d: {
        enabled: chartType === "pie",
        alpha: 45,
        beta: 0,
      },
      height: options.chartHeight || null,
    },
    credits: {
      enabled: false,
    },
    colors: options?.colores || ["#2f7ed8", "#0d233a", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"],
    title: {
      text: options?.titulo || "TITULO POR DEFAULT",
    },
    subtitle: {
      text: options?.subtitulo || "SUBTITULO POR DEFAULT",
    },
    plotOptions: {
      pie: {
        innerSize: 100,
        depth: 45,
        events: {
          click: typeof callback === "function" ? callback : () => {},
        }
      },
    },
    series: [
      {
        name: options?.nombre || "NOMBRE DE LA COLECCION DE DATOS",
        data: options?.datos || [],
      },
    ],
  });

  const chartOptions = generateDefaultChartOptions( "pie", {
    colores: ["#8bbc21", "#DF534F"],
    titulo: "Porcentaje de participación individual.",
    subtitulo: `Total: ${resultado?.totales}`,
    nombre: "Eventos",
    datos: [
      { name: `Atendidos ${resultado?.atendidos}`, y: resultado?.atendidos, x: resultado?.atendidos },
      { name: `Incompletos ${resultado?.incompletos}`, y: resultado?.incompletos, x: resultado?.incompletos },
    ],
  });

  // FIREBASE
  /* const onFinish = async (values) => {
    try {
      setCargandoReporte(true);

      const { idUsuario, rango } = values;

      const fechaInicio = new Date(rango[0]?._d.setHours(0,0,0));
      const fechaFin = new Date(rango[1]?._d.setHours(23,59,59));

      const queryConstraints = [
        where("timestamp", ">=", fechaInicio),
        where("timestamp", "<=", fechaFin),
      ];

       // Obtener eventos del usuario
       const gruposUsuario = usuario?.grupos;

       if(gruposUsuario?.length < 1 ) {
        notification.warning({
          message: "Atención",
          description: "El usuario no tiene grupos asignados."
        });
        return;
      };
  
      const ref = collection(firestore, "eventos");
      const q = query(ref, ...queryConstraints, where("grupos", "array-contains-any", gruposUsuario));
      const querySnapshot = await getDocs(q);

      const docs = []
      querySnapshot.forEach((doc) => {
        const data = doc.data();
        docs.push({ 
          accion: data?.accion, 
          resultado: data?.resultado, 
          usuarios: data?.usuarios, 
          sinFechaFin: data?.sinFechaFin,
          fechaFinal: data?.fechaFinal,
          id: doc.id 
        });
      });

      if(docs?.length < 1 ) {
        notification.warning({
          message: "Atención",
          description: "No el usuario no esta en ningún evento dentro de este rango de fechas."
        });
        return;
      };

      let _pendientes = 0;
      let _atendidos = 0;
      let _incompletos = 0;

      for (let i = 0; i < docs?.length; i++) {
        if (docs[i]?.resultado) {
          if (docs[i]?.resultado[idUsuario]) {
            if (docs[i]?.resultado[idUsuario].length >= 1) {
              _atendidos = _atendidos + 1;
            }
            if (docs[i]?.resultado[idUsuario].length === 0) {
              _pendientes = _pendientes + 1;
            }
            if (!docs[i]?.sinFechaFin) {
              // Los que tienen fecha final.
              let fechaHoy = moment(new Date());
              let fechaFinal = moment(docs[i]?.fechaFinal);
              let diff = fechaFinal.diff(fechaHoy, "days");
              if (
                diff < 0 &&
                docs[i]?.resultado[idUsuario].length === 0
              ) {
                _incompletos = _incompletos + 1;
              }
            }
          }
        }
      }  

      setResultado({
        atendidos: _atendidos,
        incompletos: _incompletos,
        totales: docs?.length
      });

    } catch (error) {
      console.log("Error al guardar: ", error);
    } finally {
      setCargandoReporte(false);
    }
  }; */

  //POSTGRES
  const onFinishPosrtgres = async (values) => {
    try {
      setCargandoReporte(true);

      const { idUsuario, rango, } = values;

      const gruposUsuario = usuario?.grupos;

      let _totales = 0;
      let _atendidos = 0;
      let _incompletos = 0;

      if(gruposUsuario?.length < 1 ) {
        notification.warning({
          message: "Atención",
          description: "El usuario no tiene grupos asignados."
        });
        return;
      };

      let body = {
        idUsuario: idUsuario,
        fechaInicio: moment(rango[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        fechaFinal: moment(rango[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
      }

      const res = await HttpService.post('v1/evento/resultados-individuales', body);
      if (res?.status === 200) {
        _incompletos = res?.detalle.pendientes;
        _atendidos = res?.detalle.participo;
        _totales = res?.detalle.total;
      }

      setResultado({
        atendidos: _atendidos,
        incompletos: _incompletos,
        totales: _totales
      });

    } catch (error) {
      console.log("Error al guardar: ", error);
    } finally {
      setCargandoReporte(false);
    }
  };

  const generarReporte = async () => {
    try {
      const columns = [
        { title: 'Nombre', key: 'nombre'},
        { title: 'Facebook', key: 'facebook'},
        { title: 'Facebook Verificado', key: 'facebookVerificado'},
        { title: 'Twitter', key: 'twitter'},
        { title: 'Twitter Verificado', key: 'twitterVerificado'},
        { title: 'Instagram', key: 'instagram'},
        { title: 'Instagram Verificado', key: 'instagramVerificado'},
        { title: 'Eventos donde participa', key: 'cantidadEventos' },
        { title: 'Atendidos', key: 'cantidadResultados' },
        { title: 'Pendientes', key: 'cantidadPendientes' }
      ];

      const infoToExport = async () => {
        const { rango } = form.getFieldsValue(true);
        let obj = {
          fechaInicio: moment(rango[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
          fechaFinal: moment(rango[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
        };
        let flag = true;
        let pagina = 1, total = 0, limite = 100;
        let registros = [];
        setImportLoading(true);
        while (flag) {
          obj["pagina"] = pagina;
          obj["limite"] = limite;
          // const params = new URLSearchParams(obj).toString();
          const res = await HttpService.post(`v1/resultados-individuales`, obj);
          const resultado = res?.response.resultado;
          registros = [
            ...registros,
            ...resultado
          ];
          let _paginacion = res?.response.paginacion;
          total = _paginacion.total;
          setTotatlUsuarios(total);
    
          const actual = pagina * limite;
          setActuales(actual);
          pagina = _paginacion?.pagina + 1;
    
          if (total < actual) {
            flag = false;
            setImportLoading(false);
          }
        }

        registros.forEach(registro => {
          if (registro?.facebookVerificado) {
            registro.facebookVerificado = 'SÍ'
          } else {
            registro.facebookVerificado = 'NO'
          }
          if (registro?.twitterVerificado) {
            registro.twitterVerificado = 'SÍ'
          } else {
            registro.twitterVerificado = 'NO'
          }
          if (registro?.instagramVerificado) {
            registro.instagramVerificado = 'SÍ'
          } else {
            registro.instagramVerificado = 'NO'
          }
        })

        return [
          ...registros
        ]
      }

      await exportarExcelJS(
        columns, 
        await infoToExport(),
        "Participacion individual",
        'participacion individual', 
        `Participacion individual:  `, 
        '/LAUD-Logotipo.png',
        ""
      )
    } catch (error) {
      console.log('error al generar reporte: ', error)
    }
  };

  const GraficasComponent = () => {
    return (
      <Row gutter={10}>
        <Col span={24}>
          <HighchartsReact
            highcharts={Highcharts}
            options={chartOptions}
            constructorType={"chart"}
          />
        </Col>
      </Row>
    )
  };

  // Obtener usuarios firebase
  /* useEffect (() => {
    try {
      setTimeout( async () => {
        const ref = collection(firestore, "usuarios");
        const q = query(ref, orderBy("nombre", "asc"));
        const querySnapshot = await getDocs(q);
        const docs = [];
        querySnapshot.forEach((doc) => {
          docs.push({ ...doc.data(), id: doc.id })
        });
        setUsuarios(docs);
      }, 0);
    } catch (error) {
      console.log('error al cargar datos de firebase: ', error);
    } finally {
      setCargandoUsuarios(false);
    }
  }, [] ); */

  useEffect(() => {
    setRequestUsuarios(usuariosParams);
    // return () => setRequestUsuarios({});
  }, [usuariosParams])

  return (
    <DefaultLayout>
      <Form
        name="form"
        form={form}
        autoComplete="off"
        layout="vertical"
        onFinish={onFinishPosrtgres}
      >
        <Row gutter={10}>
          <Col span={5}>
            <Form.Item 
              label="Usuarios" 
              name="idUsuario"
              rules={[{
                required: true,
                message: 'Selecciona un usuario!',
              }]}
              hasFeedback
            >
              <Select  
                showSearch
                onSearch={onSearchUsuarios}
                allowClear
                placeholder="Elige a un usuario"
                optionFilterProp="children"
                filterOption={(input, option) =>
                  (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                }
                loading={modelsLoading}
                onChange={(_, item) => {
                  setUsuario(item);
                  setResultado({
                    atendidos: 0,
                    incompletos: 0,
                    totales: 0
                  });
                }}
                options={ models?.length > 0 && models?.map(i => ({
                  ...i,
                  value: i.id,
                  label: i.nombre
                }))  }
              />
            </Form.Item>
          </Col>

          <Col span={8}>
            <Form.Item
                label="Selecciona un rango de fechas"
                name="rango"
                hasFeedback
                rules={[{
                  required: true,
                  message: 'Selecciona un rango de fechas!',
                }]}
              >
                <RangePicker 
                  style={{ width: "100%" }} 
                  format="DD-MM-YYYY" 
                />
            </Form.Item>
          </Col>

          <Col span={3}>
            <Form.Item
              label="&nbsp;"
            >
              <Button
                loading={cargandoReporte}
                htmlType='submit'
                type='primary'
                block
              >
                Obtener reporte
              </Button>
            </Form.Item>
          </Col>

          <Col span={3}>
            <Form.Item
              label="&nbsp;"
            >
              <Button
                onClick={ () => {
                  setResultado({
                    atendidos: 0,
                    incompletos: 0,
                    totales: 0
                  });
                  form.resetFields();
                }}
                type='dashed'
                block
              >
                <ClearOutlined />
                Limpiar
              </Button>
            </Form.Item>
          </Col>

          {<Col span={3}>
            <Form.Item
              label="&nbsp;"
            >
              <Button
                onClick={ () => generarReporte() }
                type='default'
                block
              >
                <FileExcelOutlined />
                Reporte
              </Button>
            </Form.Item>
          </Col>}

        </Row>

      
        <GraficasComponent />
      </Form>
      <Modal
        open={importLoading}
        footer={null}
        closable={false}
      >
        <Row justify="center">
          <Col>
            <Spin spinning={importLoading} tip={<>Obteniendo usuarios... <br/> {actuales > totalUsuarios ? totalUsuarios : actuales} de {totalUsuarios}</>} size="large"/>
          </Col>
        </Row>
      </Modal>
    </DefaultLayout>
  )
}

export default Individual