const createChart = (increasingData, decreasingData) =>
  Highcharts.chart('container', {
    chart: {
      inverted: true
    },
    title: {
      text: 'Change in Card Usage'
    },

    subtitle: {
      text: 'Season 21 vs Season 22 <br>Top 1000'
    },

    tooltip: {
      pointFormat:
        'Season 21: used in deck by ' +
        '<strong>{point.previous}</strong> of 1000 top players<br>' +
        'Season 22: used in deck by <strong>{point.current}</strong> ' +
        'of 1000 top players',
      shared: true
    },

    xAxis: {
      type: 'category',
      opposite: true
    },

    yAxis: {
      title: null
    },

    legend: {
      enabled: false
    },

    plotOptions: {
      dumbbell: {
        connectorWidth: 3,
        marker: {
          radius: 5,
          states: {
            hover: {
              lineWidth: 0
            }
          }
        },
        dataLabels: {
          enabled: true,
          color: 'contrast',
          crop: false,
          overflow: 'allow'
        }
      }
    },

    series: [
      {
        type: 'dumbbell',
        name: 'Increase',
        data: increasingData,
        color: Highcharts.getOptions().colors[2],
        marker: {
          enabled: true,
          symbol: 'triangleRight'
        },
        lowMarker: {
          enabled: false
        }
      },
      {
        type: 'dumbbell',
        name: 'Decrease',
        data: decreasingData,
        color: Highcharts.getOptions().colors[5],
        marker: {
          enabled: false
        },
        lowColor: undefined,
        lowMarker: {
          enabled: true,
          symbol: 'triangleLeft'
        }
      }
    ]
  });

// Define custom SVG symbols for left and right triangles
Highcharts.SVGRenderer.prototype.symbols.triangleLeft = (x, y, w, h) => [
  ['M', x, y + h / 2],
  ['L', x + w, y],
  ['L', x + w, y + h],
  ['Z']
];

Highcharts.SVGRenderer.prototype.symbols.triangleRight = (x, y, w, h) => [
  ['M', x + w, y + h / 2],
  ['L', x, y],
  ['L', x, y + h],
  ['Z']
];

// Process and transform the data for the chart
const data = [
  {
    name: 'wall-breakers',
    previous: 47,
    current: 128
  },
  {
    name: 'electro-giant',
    previous: 99,
    current: 88
  },
  {
    name: 'mortar',
    previous: 66,
    current: 79
  },
  {
    name: 'hog-rider',
    previous: 84,
    current: 78
  },
  {
    name: 'royal-giant',
    previous: 104,
    current: 73
  },
  {
    name: 'graveyars',
    previous: 101,
    current: 70
  },
  {
    name: 'test',
    previous: 51,
    current: 50
  },
  {
    name: 'giant',
    previous: 41,
    current: 49
  },
  {
    name: 'royal-hogs',
    previous: 39,
    current: 48
  },
  {
    name: 'balloon',
    previous: 62,
    current: 47
  },
  {
    name: 'lava-hound',
    previous: 54,
    current: 42
  },
  {
    name: 'goblin-drill',
    previous: 19,
    current: 41
  },
  {
    name: 'golem',
    previous: 49,
    current: 40
  },
  {
    name: 'x-bow',
    previous: 55,
    current: 36
  },
  {
    name: 'miner',
    previous: 9,
    current: 31
  },
  {
    name: 'battle-ram',
    previous: 48,
    current: 30
  },
  {
    name: 'goblin-giant',
    previous: 10,
    current: 30
  },
  {
    name: 'three-musketeers',
    previous: 18,
    current: 28
  },
  {
    name: 'goblin-barrel',
    previous: 57,
    current: 21
  },
  {
    name: 'ram-rider',
    previous: 23,
    current: 20
  },
  {
    name: 'elixir-golem',
    previous: 4,
    current: 7
  },
  {
    name: 'skeleton-barrel',
    previous: 4,
    current: 3
  }
].map(dataPoint => {
  const isIncrease = dataPoint.previous < dataPoint.current;
  return {
    name: dataPoint.name,
    low: isIncrease ? dataPoint.previous : dataPoint.current,
    high: isIncrease ? dataPoint.current : dataPoint.previous,
    custom: {
      previous: dataPoint.previous,
      current: dataPoint.current
    }
  };
});

// Separate the data into increasing and decreasing series
const increasingData = [],
  decreasingData = [];
data.forEach((dataPoint, index) => {
  const isIncrease = dataPoint.custom.previous < dataPoint.custom.current,
    transformedDataPoint = {
      ...dataPoint,
      x: index
    };

  if (isIncrease) {
    increasingData.push(transformedDataPoint);
  } else {
    decreasingData.push(transformedDataPoint);
  }
});

createChart(increasingData, decreasingData);