"use strict";

import {
  mostrarMensajes,
  obtenerArrayColores,
  iniciarAnimacionContador,
} from "../../../../assets/js/app/funcionesGenerales.js?v=1.0.0";
import Sucursal from "../../../../assets/js/models/sucursalModel.js?v=1.0.0";
import ActualizacionFE from "../models/actualizacionFEModel.js?v=1.0.0";

!(function () {
  document
    .getElementById("cbo-sucursal")
    .addEventListener("change", function () {
      configGraficos.evaluarSucursal();
    });
})();

window.onload = () => {
  configGraficos
    .inicializar()
    .then(() => {
      document.querySelector(".loader") &&
        document.querySelector(".loader").classList.add("d-none");
    })
    .catch(mostrarMensajes.error);
};

const configGraficos = {
  graficos: {
    grafico1: null,
    grafico2: null,
  },
  contenedores: {
    grafico1: "grafico1",
    grafico2: "grafico2",
  },
  data: {
    actualizaciones: [],
    clientesActivos: [],
  },
  campos: {
    sucursal: document.querySelector("#cbo-sucursal"),
  },
  inicializar: function () {
    return new Promise(async (resolve, reject) => {
      try {
        const { data: sucursales = [] } = await Sucursal.obtenerTodosPorEmpresa(
          {
            codempresa: 4,
          }
        );

        let opciones = sucursales
          .map(
            (sucursal) =>
              `<option value="${sucursal.codsucursal}">${sucursal.nombreSucursal}</option>`
          )
          .join("");

        const { data: clientesActivos } =
          await ActualizacionFE.obtenerClientesActivos();

        sucursales.push({ codsucursal: 0, nombreSucursal: "Sin sucursal" });

        this.campos.sucursal.innerHTML = opciones;
        $(`#${this.campos.sucursal.id}`).selectpicker("destroy").selectpicker();

        let { data: actualizaciones = [] } =
          await ActualizacionFE.obtenerResumenDesdeNube();

        actualizaciones = actualizaciones.map((actualizacion) => ({
          ...actualizacion,
          codsucursal: actualizacion.codsucursal || 0,
        }));

        this.data.actualizaciones = actualizaciones;
        this.data.clientesActivos = clientesActivos?.datosSucursales || [];

        const dataSucursales = sucursales.map((sucursal) => ({
          x: sucursal.nombreSucursal.trim(),
          y:
            actualizaciones.filter(
              (actualizacion) =>
                parseInt(actualizacion.codsucursal) ===
                parseInt(sucursal.codsucursal)
            ).length || 0,
        }));

        let actualizacionesMesAnterior = actualizaciones.filter(
            (actualizacion) =>
              new Date(actualizacion.fechaRegistro).getMonth() ===
              new Date().getMonth() - 1
          ),
          actualizacionesMesActual = actualizaciones.filter(
            (actualizacion) =>
              new Date(actualizacion.fechaRegistro).getMonth() ===
              new Date().getMonth()
          ),
          totalActualizaciones = actualizaciones.length,
          porcentajeIncremento = 0,
          porcentajeActivos = 0,
          activosMesAnterior = clientesActivos.mesAnterior || 0,
          activosMesActual = clientesActivos.mesActual || 0;

        let porcentaje =
            ((actualizacionesMesActual.length -
              actualizacionesMesAnterior.length) /
              actualizacionesMesAnterior.length) *
            100,
          porActivos =
            ((activosMesActual - activosMesAnterior) / activosMesAnterior) *
            100;

        porcentajeIncremento = isNaN(porcentaje) ? 0 : porcentaje;
        porcentajeActivos = isNaN(porActivos) ? 0 : porActivos;

        let iconoActualizaciones = `<i class="ri-arrow-${
            porcentajeIncremento > 0 ? "up" : "down"
          }-line align-middle"></i>`,
          iconoActivos = `<i class="ri-arrow-${
            porcentajeActivos > 0 ? "up" : "down"
          }-line align-middle"></i>`,
          spnPorcentajeActualizaciones = document.getElementById(
            "spnVariacionActualizaciones"
          ),
          spnPorcentajeActivos = document.getElementById(
            "spnVariacionClientesActivos"
          );

        spnPorcentajeActualizaciones.classList.remove(
          "text-success",
          "text-danger"
        );

        spnPorcentajeActivos.classList.remove("text-success", "text-danger");

        porcentajeIncremento > 0
          ? spnPorcentajeActualizaciones.classList.add("text-success")
          : spnPorcentajeActualizaciones.classList.add("text-danger");

        porcentajeActivos > 0
          ? spnPorcentajeActivos.classList.add("text-success")
          : spnPorcentajeActivos.classList.add("text-danger");

        spnPorcentajeActualizaciones.innerHTML = `${iconoActualizaciones} ${porcentajeIncremento.toFixed(
          2
        )}%`;

        spnPorcentajeActivos.innerHTML = `${iconoActivos} ${porcentajeActivos.toFixed(
          2
        )}%`;

        document
          .getElementById("spnClientesActualizados")
          .setAttribute("data-target", totalActualizaciones);

        document
          .getElementById("spnTotalClientes")
          .setAttribute("data-target", activosMesActual);

        this.inicializarGraficos({ dataSucursales });
        this.evaluarSucursal();
        iniciarAnimacionContador();

        resolve();
      } catch (err) {
        reject(err);
      }
    });
  },
  inicializarGraficos: function ({ dataSucursales }) {
    const opcionesGrafico1 = {
      series: [
        {
          name: "Actualizaciones",
          data: dataSucursales,
        },
      ],
      chart: {
        type: "area",
        stacked: !1,
        height: 350,
        zoom: { type: "x", enabled: !0, autoScaleYaxis: !0 },
        toolbar: { autoSelected: "zoom" },
      },
      colors: obtenerArrayColores(this.contenedores.grafico1),
      dataLabels: { enabled: !1 },
      markers: { size: 0 },
      title: {
        text: "Total por sucursal",
        align: "left",
        style: { fontWeight: 500 },
      },
      fill: {
        type: "gradient",
        gradient: {
          shadeIntensity: 1,
          inverseColors: !1,
          opacityFrom: 0.5,
          opacityTo: 0,
          stops: [0, 90, 100],
        },
      },
      yaxis: {
        showAlways: !0,
        labels: {
          show: !0,
          formatter: function (e) {
            return parseInt(e);
          },
        },
        title: { text: "Actualizaciones", style: { fontWeight: 500 } },
      },
      xaxis: { type: "string" },
      tooltip: {
        shared: !1,
        y: {
          formatter: function (e) {
            return parseInt(e);
          },
        },
      },
    };
    this.graficos.grafico1 = new ApexCharts(
      document.querySelector(`#${this.contenedores.grafico1}`),
      opcionesGrafico1
    ).render();
  },
  evaluarSucursal: function () {
    // const contenedor = document.querySelector(
    //     `#${this.contenedores.grafico2}`
    //   ).parentNode,
    //   sucursal = this.campos.sucursal.value;
    // const htmlGrafico = `<div class="apex-charts" id="${this.contenedores.grafico2}" dir="ltr" data-colors='["--vz-warning","--vz-success"]'></div>`;
    // if (this.graficos.grafico2 !== null) this.graficos.grafico2.destroy();

    // contenedor.innerHTML = htmlGrafico;

    const sucursal = this.campos.sucursal.value;

    let clientesActualizados = 0,
      totalClientes = 0;

    totalClientes =
      this.data.clientesActivos.find(
        (suc) => parseInt(suc.codsucursal) === parseInt(sucursal)
      )?.clientes || 0;
    clientesActualizados =
      this.data.actualizaciones.filter(
        (actualizacion) =>
          parseInt(actualizacion.codsucursal) === parseInt(sucursal)
      ).length || 0;

    totalClientes = parseInt(totalClientes) - parseInt(clientesActualizados);

    const arrColores = obtenerArrayColores(this.contenedores.grafico2);

    if (this.graficos.grafico2 == null) {
      const opcionesGrafico2 = {
        series: [totalClientes, clientesActualizados],
        chart: { height: 300, type: "pie" },
        labels: ["Sin actualizar", "Actualizados"],
        legend: { position: "bottom" },
        dataLabels: { dropShadow: { enabled: !1 } },
        colors: arrColores,
      };

      this.graficos.grafico2 = new ApexCharts(
        document.querySelector(`#${this.contenedores.grafico2}`),
        opcionesGrafico2
      );

      this.graficos.grafico2.render();
    } else {
      this.graficos.grafico2.updateSeries(
        [totalClientes, clientesActualizados],
        true
      );
    }
  },
};
