import deepClone from 'lodash/cloneDeep';
import isArray from 'lodash/isArray';

/* eslint-disable */
const defaultChart = {
  "width": 1,
  "height": 1,
  "data": [
    {
      "name": "table"
    }
  ],
  "scales": [
    {
      "name": "r",
      "type": "sqrt",
      "domain": {"data": "table", "field": "y"},
      "range": [20, 100]
    },
    {
      "name": "c",
      "type": "ordinal",
      "domain": {"data": "table", "field": "x"},
      "range": "category20"
    }
  ],
  "marks": [
    {
      "type": "arc",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"field": {"group": "width"}, "mult": 0.5},
          "y": {"field": {"group": "height"}, "mult": 0.5},
          "startAngle": {"field": "layout_start"},
          "endAngle": {"field": "layout_end"},
          "innerRadius": {"value": 20},
          "outerRadius": {"value": 150},
          "fill": {"scale": "c", "field": "x"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"field": {"group": "width"}, "mult": 0.5},
          "y": {"field": {"group": "height"}, "mult": 0.5},
          "radius": {"value": 110},
          "theta": {"field": "layout_mid"},
          "fill": {"value": "#000"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "text": {"field": "x"},
          "opacity": {"value": 0.6}
        }
      }
    }
  ]
}

/**
 * Return the Vega chart configuration
 * 
 * @export
 * @param {any} { columns, data } 
 */
export default function ({ columns, data }) {
  const config = deepClone(defaultChart);
  // Whether we have access to the data instead
  // of having its URL
  const hasAccessToData = isArray(data);

  if (hasAccessToData) {
    // We directly set the data
    config.data[0].values = data;
  } else {
    // We set the URL of the dataset
    config.data[0].url = data.url;
    config.data[0].format = {
      "type": "json",
      "property": data.property
    };
  }

  config.data[0].transform = [{
    "type": "pie", "field": "y"
  }];

  if (columns.color.present) {
    const colorScale = config.scales.find(scale => scale.name === 'c');
    colorScale.domain.field = 'color';
  }

  if (columns.size.present) {
    // We add the scale
    config.scales.push({
      "name": "s",
      "type": "sqrt",
      "domain": {"data": "table", "field": "size"},
      "range": [10, 150],
      "zero": false
    });

    const arcMark = config.marks.find(mark => mark.type === 'arc');
    arcMark.properties.enter.outerRadius = {
      "scale": "s",
      "field": "size"
    };

    const textMark = config.marks.find(mark => mark.type === 'text');
    textMark.properties.enter.radius = {
      "scale": "s",
      "field": "size",
      "offset": 10
    }
  }

  return config;
};

@@ -478,16 +478,490 @@
  %7D%0A  %5D,%0A
+  // This axis is not used by the marks%0A  // but is necessary for the tooltip to show%0A  axes: %5B%0A    %7B%0A      %22type%22: %22x%22,%0A      %22scale%22: %22r%22,%0A      %22ticks%22: 0,%0A      %22tickSize%22: 0,%0A      %22properties%22: %7B%0A        %22labels%22: %7B%0A          %22text%22: %7B%22template%22: %22%22%7D,%0A        %7D%0A      %7D%0A    %7D,%0A    %7B%0A      %22type%22: %22y%22,%0A      %22scale%22: %22r%22,%0A      %22ticks%22: 0,%0A      %22tickSize%22: 0,%0A      %22properties%22: %7B%0A        %22labels%22: %7B%0A          %22text%22: %7B%22template%22: %22%22%7D,%0A        %7D%0A      %7D%0A    %7D%0A  %5D,%0A
   %22marks
@@ -2597,16 +2597,314 @@
 %0A  %7D%5D;%0A%0A
+  // We add the name of the axis%0A  // We don't have real x and y axis for the pie%0A  // chart but we use them for the tooltip%0A  const xAxis = config.axes.find(a =%3E a.type === 'x');%0A  const yAxis = config.axes.find(a =%3E a.type === 'y');%0A  xAxis.name = columns.x.name;%0A  yAxis.name = columns.y.name;%0A%0A
   if (co

Bring back the tooltip for the pie chart