import React, { useEffect, useState } from 'react'
import { Row, Form, Col, Button, DatePicker, Select as AntdSelect, Modal, Spin, Tag, Table, Collapse } from 'antd'
import { TwitterOutlined, FacebookOutlined, InstagramOutlined, CheckOutlined, CloseOutlined, MinusOutlined } from '@ant-design/icons'
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'
import { Select } from '../../../components'

const { RangePicker } = DatePicker;

const Evento = () => {

  let w = window.innerWidth * 0.80;

  const { Option } = AntdSelect;
  const [form] = Form.useForm();
  const [cargandoReporte, setCargandoReporte] = useState(false);
  // const [ cargandoEventos, setCargandoEventos ] = useState(true);
  // const [ eventos, setEventos ] = useState([]);
  // const [ resultado, setResultado ] = useState([]);

  const [timer, setTimer] = useState(null);
  const [eventosRequest, setEventosRequest] = useState({});
  const [buscarValue, setBuscarValue] = useState('');
  const [importLoading, setImportLoading] = useState(false);
  const [totalEventos, setTotatlEventos] = useState(0);
  const [actuales, setActuales] = useState(0);
  const [porUsuarios, setPorUsuarios] = useState(null);
  const [porDependencias, setPorDependencias] = useState([]);
  const [fechaInicio, setFechaInicio] = useState('');
  const [fechaFin, setFechaFin] = useState('');
  const [condensado, setCondensado] = useState([]);

  const eventosExtraParams = React.useMemo(() => ({ q: buscarValue }), [buscarValue])
  const eventosParams = React.useMemo(() => ({
    name: 'v1/evento',
    limite: 20,
    extraParams: eventosExtraParams
  }), [eventosExtraParams])

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

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

    setTimer(newTimer);
  };

  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: porDependencias.map(i => {
          return { name: i.nombre, y: i.participaciones }
        }),
        showInLegend: false
      },
      {
        name: "Pendiente",
        data: porDependencias.map(i => {
          return { name: i.nombre, y: i.pendientes }
        }),
        showInLegend: false
      },
    ],
    title: {
      text: "Participación entre dependencias",
    },
    xAxis: {
      categories: porDependencias.length > 0 && porDependencias.map(i => i.nombre),
    },
  };

  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 chartOptionsDependencia = generateDefaultChartOptions("pie", {
    colores: ["#4FD0DF", "#DF534F",],
    titulo: "Participación por Dependencia.",
    subtitulo: `Total: ${porDependencias?.total}`,
    nombre: "Participaciones",
    datos: [
      { name: "Participó", y: porDependencias?.participaciones, x: `${porDependencias?.participaciones}` },
      { name: "Sin participación", y: porDependencias?.pendientes, x: `${porDependencias?.pendientes}` },
    ],
  });

  const chartOptionsUsuario = generateDefaultChartOptions("pie", {
    colores: ["#4FD0DF", "#DF534F",],
    titulo: "Participación por usuarios.",
    subtitulo: `Total: ${porUsuarios?.total}`,
    nombre: "Participaciones",
    datos: [
      { name: "Participó", y: porUsuarios?.participaciones, x: `${porUsuarios?.participaciones}` },
      { name: "Sin participación", y: porUsuarios?.pendientes, x: `${porUsuarios?.pendientes}` },
    ],
  });

  const colunasCondensado = [
    {
      title: 'Nombre',
      key: 'nombre',
      dataIndex: 'nombre',
    },
    {
      title: 'Dependencia',
      key: 'dependencia',
      dataIndex: 'dependencia',
    },
    {
      title: 'Facebook Verificado',
      key: 'tieneFb',
      dataIndex: 'tieneFb',
      render: (_, row) => {
        if (row?.tieneFb > 0) {
          return <CheckOutlined color='green' />
        } else {
          return <CloseOutlined color='red' />
        }
      }
    },
    {
      title: 'Twitter Verificado',
      key: 'tieneTw',
      dataIndex: 'tieneTw',
      render: (_, row) => {
        if (row?.tieneTw > 0) {
          return <CheckOutlined color='green' />
        } else {
          return <CloseOutlined color='red' />
        }
      }
    },
    {
      title: 'Instagram Verificado',
      key: 'tieneIg',
      dataIndex: 'tieneIg',
      render: (_, row) => {
        if (row?.tieneIg > 0) {
          return <CheckOutlined color='green' />
        } else {
          return <CloseOutlined color='red' />
        }
      }
    },
    {
      title: 'Participación Facebook',
      key: 'participoFacebook',
      dataIndex: 'participoFacebook',
      render: (_, row) => {
        if (row?.tieneFb > 0) {
          if (row?.participoFacebook > 0) {
            return <CheckOutlined color='green' />
          } else {
            return <CloseOutlined color='red' />
          }
        } else {
          return <MinusOutlined />
        }
      }
    },
    {
      title: 'Paricipación Twitter',
      key: 'participoTwitter',
      dataIndex: 'participoTwitter',
      render: (_, row) => {
        if (row?.tieneTw > 0) {
          if (row?.participoTwitter > 0) {
            return <CheckOutlined color='green' />
          } else {
            return <CloseOutlined color='red' />
          }
        } else {
          return <MinusOutlined />
        }
      }
    },
    {
      title: 'Participación Instagram',
      key: 'participoInstagram',
      dataIndex: 'participoInstagram',
      render: (_, row) => {
        if (row?.tieneIg > 0) {
          if (row?.participoInstagram > 0) {
            return <CheckOutlined color='green' />
          } else {
            return <CloseOutlined color='red' />
          }
        } else {
          return <MinusOutlined />
        }
      }
    },
  ];

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

      const { idEvento } = values;

      let body = {
        tag: idEvento,
        fechaInicio: moment(fechaInicio).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        fechaFinal: moment(fechaFin).endOf('day').format('YYYY-MM-DD HH:mm:ss')
      }

      // const res = await HttpService.post('v1/evento/por-evento', body);
      const res2 = await HttpService.post('v1/evento/condensado', body);
      /* if (res?.status === 200) {
        setPorUsuarios({
          total: res?.detalle?.totalResultadosUsuarios,
          participaciones: res?.detalle?.participoResultadosUsuarios,
          pendientes: res?.detalle?.pendientesResultadosUsuarios
        });
      } */
      if (res2?.status === 200) {
        setPorUsuarios({
          total: res2?.detalle?.total,
          participaciones: res2?.detalle?.participaciones,
          pendientes: res2?.detalle?.pendientes
        });
        let resultado = res2?.detalle?.usuarios;
        resultado = resultado?.sort((a, b) => {
          const comparacionDependencia = a?.dependencia?.localeCompare(b?.dependencia);

          if (comparacionDependencia === 0) {
            return a?.nombre?.localeCompare(b?.nombre);
          }

          return comparacionDependencia;
        })
        setCondensado(resultado);
        let _dependencias = res2?.detalle?.dependencias.sort((a, b) => a?.nombre?.localeCompare(b?.nombre));
        setPorDependencias(_dependencias);
      }

      // setResultado([1,2,3,4,5]);

    } 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' },
        { title: 'Ciudad', key: 'ciudad' },
        { title: 'Tag', key: 'tag' },
      ];

      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/evento?${params}`);
          const resultado = res?.resultado;
          registros = [
            ...registros,
            ...resultado
          ];
          let _paginacion = res?.paginacion;
          total = _paginacion.total;
          setTotatlEventos(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 por evento",
        'participacion por evento',
        `Participacion por evento:  `,
        '/LAUD-Logotipo.png',
        ""
      )
    } catch (error) {
      console.log('error al generar reporte: ', error)
    }
  };

  const GraficasComponent = () => {
    return (
      <Spin spinning={cargandoReporte} tip='Obteniendo resultados ...'>
        {porDependencias && condensado && porUsuarios && !cargandoReporte && (
          <>
            <Row gutter={10}>
              <Col span={12}>
                <HighchartsReact
                  highcharts={Highcharts}
                  options={chartOptionsUsuario}
                  constructorType={"chart"}
                />
              </Col>
            </Row>
            <Row gutter={10}>
              <Col span={24}>
                <Collapse>
                  <Collapse.Panel header='Usuarios' key={'1'}>
                    <Table
                      dataSource={condensado}
                      columns={colunasCondensado}
                      pagination={false}
                      size='small'
                      rowKey={'id'}
                    />
                  </Collapse.Panel>
                </Collapse>
              </Col>
            </Row>
            <Row gutter={10}>
              <Col span={24}>
                <HighchartsReact
                  highcharts={Highcharts}
                  options={chartOptionsBarras}
                />
              </Col>
            </Row>
          </>
        )}
      </Spin>
    )
  };

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

  useEffect(() => {
    setEventosRequest(eventosParams);
    return () => setEventosRequest({});
  }, [eventosParams])

  return (
    <DefaultLayout>
      <Form
        name="form"
        form={form}
        autoComplete="off"
        layout="vertical"
        onFinish={onFinish}
      >
        <Row gutter={10}>
          <Col span={7}>
            <Form.Item
              label="Eventos"
              name="idEvento"
              hasFeedback
            >
              <Select
                modelsParams={{
                  name: 'v1/evento/tag',
                  limite: 20,
                  ordenar: 'fechaInicio-asc'
                }}
                placeholder="Selecciona un evento"
                labelProp="nombre"
                valueProp="tag"
                allowClear={true}
                autoComplete="off"
                render={(_, row) => <>{/* <Tag color={row.redSocial === 'Twitter' ? "#55acee" : row.redSocial === 'Facebook' ? "#3b5999" : "#fc136b"}>{row.redSocial === 'Twitter' ? <TwitterOutlined /> : row.redSocial === 'Facebook' ? <FacebookOutlined /> : <InstagramOutlined />}</Tag> -  */}{row.nombre}</>}
                onChange={(_, row) => {
                  setFechaInicio(row?.fechaInicio)
                  setFechaFin(row?.fechaFinal)
                }}
              />
            </Form.Item>
          </Col>

          {/* <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={() => {
                  setPorDependencias([]);
                  setPorUsuarios({});
                  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>

        { /* porDependencias && porUsuarios && !cargandoReporte && (
          )  */}
        <GraficasComponent />
      </Form>

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

export default Evento