// JavaScript Document
am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0;

chart.data = [
  {
    country: "Μήλα πράσινα",
    visits: 0
  },
  {
    country: "Μήλα κόκκινα",
    visits: 0
  },
  {
    country: "Μήλα κίτρινα",
    visits: 0
  },

];

chart.padding(40, 40, 0, 0);
chart.maskBullets = false;

var text = chart.plotContainer.createChild(am4core.Label);
text.text = " ";
text.y = 10;
text.x = am4core.percent(90);
text.horizontalCenter = "right";
text.zIndex = 100;
text.fillOpacity = 0.7;

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.minGridDistance = 50;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.strictMinMax = true;
valueAxis.min = 0;
valueAxis.max = 10;
valueAxis.renderer.minWidth = 6;

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "country";
series.dataFields.valueY = "visits";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.dy = -8;
series.sequencedInterpolation = true;
series.defaultState.interpolationDuration = 1500;
series.columns.template.strokeOpacity = 0;

var labelBullet = new am4charts.LabelBullet();
series.bullets.push(labelBullet);
labelBullet.label.text = "{valueY.value.formatNumber('#.')}";
labelBullet.strokeOpacity = 0;
labelBullet.stroke = am4core.color("#dadada");
labelBullet.dy = -20;

var bullet = series.bullets.create();
bullet.stroke = am4core.color("#ffffff");
bullet.strokeWidth = 3;
bullet.opacity = 1;
bullet.defaultState.properties.opacity = 1;
bullet.cursorOverStyle = am4core.MouseCursorStyle.verticalResize;
bullet.draggable = true;

var hoverState = bullet.states.create("hover");
hoverState.properties.opacity = 1;

var circle = bullet.createChild(am4core.Circle);
circle.radius = 8;

bullet.events.on("drag", event => {
  handleDrag(event);
});

bullet.events.on("dragstop", event => {
  handleDrag(event);
  var dataItem = event.target.dataItem;
  dataItem.column.isHover = false;
  event.target.isHover = false;
});

function handleDrag(event) {
  var dataItem = event.target.dataItem;
  var value = valueAxis.yToValue(event.target.pixelY);
  dataItem.valueY = value;
  dataItem.column.isHover = true;
  dataItem.column.hideTooltip(0);
  event.target.isHover = true;
}

var columnTemplate = series.columns.template;
columnTemplate.column.cornerRadiusTopLeft = 3;
columnTemplate.column.cornerRadiusTopRight = 3;
columnTemplate.column.fillOpacity = 0.8;
columnTemplate.tooltipText = "Σύρε με!";
columnTemplate.tooltipY = 0;

var columnHoverState = columnTemplate.column.states.create("hover");
columnHoverState.properties.fillOpacity = 1;
columnHoverState.properties.cornerRadiusTopLeft = 3;
columnHoverState.properties.cornerRadiusTopRight = 3;

columnTemplate.events.on("over", event => {
  var dataItem = event.target.dataItem;
  var itemBullet = dataItem.bullets.getKey(bullet.uid);
  itemBullet.isHover = true;
});

columnTemplate.events.on("out", event => {
  var dataItem = event.target.dataItem;
  var itemBullet = dataItem.bullets.getKey(bullet.uid);
  itemBullet.isHover = false;
});

columnTemplate.events.on("down", event => {
  var dataItem = event.target.dataItem;
  var itemBullet = dataItem.bullets.getKey(bullet.uid);
  itemBullet.dragStart(event.pointer);
});

columnTemplate.events.on("positionchanged", event => {
  var dataItem = event.target.dataItem;
  var itemBullet = dataItem.bullets.getKey(bullet.uid);

  var column = dataItem.column;
  itemBullet.minX = column.pixelX + column.pixelWidth / 2;
  itemBullet.maxX = itemBullet.minX;
  itemBullet.minY = 0;
  itemBullet.maxY = chart.seriesContainer.pixelHeight;
});

columnTemplate.adapter.add("fill", (fill, target) => {
  return chart.colors.getIndex(target.dataItem.index).saturate(0.3);
});

bullet.adapter.add("fill", (fill, target) => {
  return chart.colors.getIndex(target.dataItem.index).saturate(0.3);
});
