import React, { useState } from 'react'
import { Row, Form, Col, Button, DatePicker, Modal, Spin, Table } 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 HttpService from '../../../services/httpService'
import moment from 'moment'
import { FileExcelOutlined } from '@ant-design/icons'

const { RangePicker } = DatePicker;

let w = window.innerWidth * 0.80;
const Comparativa = () => {

  const [form] = Form.useForm();
  const [cargandoReporte, setCargandoReporte] = useState(false);
  // const [ cargandoDependencias, setCargandoDependencias ] = useState(true);
  const [dependencias, setDependencias] = useState([]);

  const [importLoading, setImportLoading] = useState(false);
  const [totalUsuarios, setTotatlDependencias] = useState(0);
  const [actuales, setActuales] = useState(0);


  const chartOptionsBarras = {
    chart: {
      type: 'column',
      // width: 1500
      width: w
    },
    plotOptions: {
      series: {
        // general options for all series
      },
      area: {
        // shared options for all area series
      }
    },
    series: [
      {
        name: "Participación",
        data: dependencias.map(i => {
          return { name: i.nombre, y: i.participaciones }
        }),
        showInLegend: false
      },
      {
        name: "Pendiente",
        data: dependencias.map(i => {
          return { name: i.nombre, y: i.pendientes }
        }),
        showInLegend: false
      },
    ],
    title: {
      text: "Participación entre dependencias",
    },
    xAxis: {
      categories: dependencias.length > 0 && dependencias.map(i => i.nombre),
    },
  };

  const columnas = [
    {
      title: 'Nombre',
      key: 'nombre',
      dataIndex: 'nombre'
    },
    {
      title: 'Participaciones',
      key: 'participaciones',
      dataIndex: 'participaciones'
    },
    {
      title: 'Pendientes',
      key: 'pendientes',
      dataIndex: 'pendientes'
    },
    {
      title: 'Total de Usuarios Registrados',
      key: 'cantidadUsuarios',
      dataIndex: 'cantidadUsuarios'
    },
    {
      title: 'Porcentaje de Participación',
      key: 'porcentajeParticipacion',
      dataIndex: 'porcentajeParticipacion',
      render: (item) => {
        let valor = parseFloat(item) % 1;
        console.log(valor)
        if (valor === 0) {
          return `${parseFloat(item)}%`
        }
        return `${parseFloat(item)?.toFixed(2)}%`
    }
    },
  ];

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

      const { rango } = values;

      let body = {
        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/comparativa-dependencia', body);
      if (res?.status === 200) {
        // console.log('res?.detalle: ', res?.detalle)
        // let _dependencias = res?.detalle?.sort((a, b) => b?.participaciones - a?.participaciones)
        setDependencias(res?.detalle)
      }

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

  /* const generarReporte = async () => {
    try {
      const columns = [
        { title: 'Nombre', key: 'nombre'},
        { title: 'Descripción', key: 'descripcion'},
      ];

      const infoToExport = async () => {
        let obj = {};
        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.get(`v1/dependencia?${params}`);
          const resultado = res?.resultado;
          registros = [
            ...registros,
            ...resultado
          ];
          let _paginacion = res?.paginacion;
          total = _paginacion.total;
          setTotatlDependencias(total);
    
          const actual = pagina * limite;
          setActuales(actual);
          pagina = _paginacion?.pagina + 1;
    
          if (total < actual) {
            flag = false;
            setImportLoading(false);
          }
        }

        return [
          ...registros
        ]
      }

      await exportarExcelJS(
        columns, 
        await infoToExport(), 
        "Participacion comparativa",
        'participacion comparativa', 
        `Participacion comparativa:  `, 
        '/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={chartOptionsBarras}
          />
        </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);
    }
  }, [] ); */

  return (
    <DefaultLayout>
      <Form
        name="form"
        form={form}
        autoComplete="off"
        layout="vertical"
        onFinish={onFinish}
      >
        <Row gutter={10}>

          <Col span={8}>
            <Form.Item
              label="Selecciona un rango de fechas"
              name="rango"
              hasFeedback
            >
              <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={() => {
                  setDependencias([]);
                  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>

        {dependencias.length > 0 && !cargandoReporte && (
          <Row gutter={10}>
            <Col span={24}>
              <GraficasComponent />
            </Col>
            <Col span={24}>
              <Row gutter={10} justify={'end'}>
                <Col>
                  <Button
                    type='primary'
                    icon={<FileExcelOutlined />}
                    onClick={() => {
                      let values = form.getFieldsValue(true);
                      let { rango } = values;

                      let fechaInicio = moment(rango[0]).startOf('day').format('YYYY-MM-DD');
                      let fechaFinal = moment(rango[1]).endOf('day').format('YYYY-MM-DD');
                      window.open(`https://yager.api.fourier.audio/v1/comparativa-dependencia?inicio=${fechaInicio}&fin=${fechaFinal}`)
                    }}
                  >
                    Descargar
                  </Button>
                </Col>
              </Row>
              <Row gutter={10} justify={'end'}>
                <Col span={24}>
                  <Table
                    size='small'
                    rowKey={'id'}
                    columns={columnas}
                    pagination={false}
                    dataSource={dependencias}
                  />
                </Col>
              </Row>
            </Col>
          </Row>
        )}
      </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 Comparativa