import { isObject, isUndefined } from '../../utils/isType';
import { initializeCharts, createChart, drawHorizontalBar } from '../../utils/charts';

$(() => {
  // fns to handle the separator character menu
  // for CSV download
  const changeStatFnGen = (str) => {
    const fn = (item) => {
      /* eslint no-param-reassign: ["error", { "props": false }] */
      item.href = item.href.replace(/sep=.*/, str);
    };
    return fn;
  };

  // attach listener to separator select menu
  // on change look for "stat" elements and chnage their query param
  document.getElementById('csv-field-sep').addEventListener('click', (e) => {
    const statElems = document.getElementsByClassName('stat');
    const newSep = 'sep='.concat(encodeURIComponent(e.target.value));
    const changeStatFn = changeStatFnGen(newSep);
    Array.from(statElems).forEach(changeStatFn);
  });

  initializeCharts();

  // Create the Users joined chart
  if (!isUndefined($('#users_joined').val())) {
    const usersData = JSON.parse($('#users_joined').val());
    if (isObject(usersData)) {
      createChart('#yearly_users', usersData);
    }
  }
  // Create the Plans created chart
  if (!isUndefined($('#plans_created').val())) {
    const plansData = JSON.parse($('#plans_created').val());
    if (isObject(plansData)) {
      createChart('#yearly_plans', plansData);
    }
  }
  // TODO: Most of these event listeners would not be necessary if JQuery and
  //       all other JS libraries were available to the js.erb files. Reevaluate
  //       this JS once we move to Rails 5 and properly configure webpacker
  let drawnChartByTemplate = null;
  const monthlyPlanTemplatesChart = document.getElementById('monthly_plans_by_template');
  // Add event listeners that draw and destroy the chart
  if (isObject(monthlyPlanTemplatesChart)) {
    monthlyPlanTemplatesChart.addEventListener('renderChart', (e) => {
      drawnChartByTemplate = drawHorizontalBar($('#monthly_plans_by_template'), e.detail);
      // Assigning the chart to a window variable here so that we can fire
      // the events from the js.erb
      window.templatePlansChart = document.getElementById('monthly_plans_by_template');
    });
    monthlyPlanTemplatesChart.addEventListener('destroyChart', () => {
      if (drawnChartByTemplate) {
        drawnChartByTemplate.destroy();
      }
    });
  }

  const monthlyPlanUsingTemplatesChart = document.getElementById('monthly_plans_using_template');
  // Add event listeners that draw the chart if it exists
  if (isObject(monthlyPlanUsingTemplatesChart)) {
    monthlyPlanUsingTemplatesChart.addEventListener('renderChart', (e) => {
      drawHorizontalBar($('#monthly_plans_using_template'), e.detail);
    });
  }

  // Create the initial Plans per template chart if the chart exists
  if (isObject(monthlyPlanTemplatesChart)) {
    const templatePlansData = JSON.parse($('#plans_by_template').val());
    const drawPer = new CustomEvent('renderChart', { detail: templatePlansData });
    document.getElementById('monthly_plans_by_template').dispatchEvent(drawPer);
  }
  // Create the initial Plans using template chart if the chart exists
  if (isObject(monthlyPlanUsingTemplatesChart)) {
    const usingTemplatePlansData = JSON.parse($('#plans_using_template').val());
    const drawUsing = new CustomEvent('renderChart', { detail: usingTemplatePlansData });
    document.getElementById('monthly_plans_using_template').dispatchEvent(drawUsing);
  }
});