import Vue from 'vue';
import { createAlert } from '~/alert';
import axios from '~/lib/utils/axios_utils';
import { __ } from '~/locale';
import DivergenceGraph from './components/divergence_graph.vue';

export function createGraphVueApp(el, data, maxCommits, defaultBranch) {
  return new Vue({
    el,
    render(h) {
      return h(DivergenceGraph, {
        props: {
          defaultBranch,
          distance: data.distance ? parseInt(data.distance, 10) : null,
          aheadCount: parseInt(data.ahead, 10),
          behindCount: parseInt(data.behind, 10),
          maxCommits,
        },
      });
    },
  });
}

export default (endpoint, defaultBranch) => {
  const names = [...document.querySelectorAll('.js-branch-item')].map(
    ({ dataset }) => dataset.name,
  );

  if (names.length === 0) {
    return true;
  }

  return axios
    .get(endpoint, {
      params: { names },
    })
    .then(({ data }) => {
      const maxCommits = Object.entries(data).reduce((acc, [, val]) => {
        const max = Math.max(...Object.values(val));
        return max > acc ? max : acc;
      }, 100);

      Object.entries(data).forEach(([branchName, val]) => {
        const el = document.querySelector(
          `[data-name="${branchName}"] .js-branch-divergence-graph`,
        );

        if (!el) return;

        createGraphVueApp(el, val, maxCommits, defaultBranch);
      });
    })
    .catch(() =>
      createAlert({
        message: __('Error fetching diverging counts for branches. Please try again.'),
      }),
    );
};