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

const { RangePicker } = DatePicker;

const Dependencia = () => {
  const [form] = Form.useForm();
  const [ cargandoReporte, setCargandoReporte ] = useState(false);
  // const [ cargandoDependencias, setCargandoDependencias ] = useState(true);
  // const [ dependencias, setDependencias ] = useState([]);
  const [ resultado, setResultado ] = useState(null);

  const [timer, setTimer] = useState(null);
  const [ dependenciasRequest, setDependenciasRequest ] = useState({});
  const [ buscarValue, setBuscarValue ] = useState('');
  const [ importLoading, setImportLoading ] = useState(false);
  const [ totalUsuarios, setTotatlDependencias ] = useState(0);
  const [ actuales, setActuales ] = useState(0);
  const [ nombreDependencia, setNombreDependencia ] = useState('');

  const dependenciasExtraParams = React.useMemo(() => ({ q: buscarValue }), [buscarValue])
  const dependenciasParams = React.useMemo(() => ({
    name: 'v1/dependencia',
    limite: 20,
    extraParams: dependenciasExtraParams
  }), [dependenciasExtraParams])

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

  const onSearchDependencias = (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: ["#4FD0DF", "#DF534F"],
    titulo: "Porcentaje de participación por Dependencia.",
    subtitulo: `Total: ${resultado?.totales}`,
    nombre: "Participaciones",
    datos: [
      { name: `Participó ${resultado?.atendidos}`, y: resultado?.atendidos, x: resultado?.atendidos },
      { name: `Sin participación ${resultado?.pendientes}`, y: resultado?.pendientes, x: resultado?.pendientes },
    ],
  });

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

      const { idDependencia, rango } = values;

      let _totales = 0;
      let _atendidos = 0;
      let _pendientes = 0;
      
      let body = {
        idDependencia: idDependencia,
        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-dependencia', body);
      if (res?.status === 200) {
        _pendientes = res?.detalle.pendientes;
        _atendidos = res?.detalle.participo;
        _totales = res?.detalle.total;
      }

      setResultado({
        atendidos: _atendidos,
        pendientes: _pendientes,
        totales: _totales
      });

    } catch (error) {
      console.log("Error al generar reporte: ", 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 { idDependencia, rango } = form.getFieldsValue(true);
        let obj = {
          idDependencia: idDependencia,
          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/evento/resultados-dependencia`, obj);
          const resultado = res?.response?.detalle?.usuarios;
          registros = [
            ...registros,
            ...resultado
          ];
          // let _paginacion = res?.paginacion;
          total = res?.response?.detalle?.usuarios?.length;
          setTotatlDependencias(total);
    
          const actual = pagina * limite;
          setActuales(actual);
          pagina += 1;
    
          if (total < actual) {
            flag = false;
            setImportLoading(false);
          }
        }

        return [
          ...registros
        ]
      }
      
      await exportarExcelJS(
        columns, 
        await infoToExport(), 
        "Participación por dependencia",
        "participación por dependencia",
        `Participación por dependencia: "${nombreDependencia}"`,
        "/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 dependencias Firebase
  /* useEffect (() => {
    try {
      setTimeout(async () => {
        const ref = collection(firestore, "dependencias");
        const q = query(ref, orderBy("nombre", "asc"));
        const querySnapshot = await getDocs(q);
        const docs = [];
        querySnapshot.forEach((doc) => {
          docs.push({ ...doc.data(), id: doc.id });
        });
        setDependencias(docs);
      }, 0);
    } catch (error) {
      console.log("error al cargar datos de firebase: ", error);
    } finally {
      setCargandoDependencias(false);
    }
  }, [] ); */

  useEffect(() => {
    setDependenciasRequest(dependenciasParams);
    return () => setDependenciasRequest({});
  }, [dependenciasParams])

  return (
    <DefaultLayout>
      <Form
        name="form"
        form={form}
        autoComplete="off"
        layout="vertical"
        onFinish={onFinish}
      >
        <Row gutter={10}>
          <Col span={5}>
            <Form.Item
              label="Dependencias"
              name="idDependencia"
              hasFeedback
              rules={[
                {
                  required: true,
                  message: "Selecciona una dependencia!",
                },
              ]}
            >
              <Select
                showSearch
                onSearch={onSearchDependencias}
                allowClear
                placeholder="Elige a una dependencia"
                optionFilterProp="children"
                filterOption={(input, option) =>
                  (option?.label ?? "")
                    .toLowerCase()
                    .includes(input.toLowerCase())
                }
                loading={modelsLoading}
                options={ models?.length > 0 && models?.map(i => ({
                  ...i,
                  value: i.id,
                  label: i.nombre
                }))  }
                onChange={(_, item) => {setNombreDependencia(item?.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([]);
                  form.resetFields();
                }}
                type="dashed"
                block
              >
                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>

          {resultado !== null && !cargandoReporte && (
            <GraficasComponent />
          )}
      </Form>

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

export default Dependencia