<script setup>
import { watch, onMounted, ref, onBeforeUnmount } from 'vue';
import { useNuxtApp } from '#app';

const props = defineProps({
  dataSet: Array
})

const chartdiv = ref(null);
const { $am5, $am5xy, $am5themes_Animated } = useNuxtApp();

const overviewLabels = ref({
  orders: 'Orders',
  // invoices: 'Invoices',
  // shipments: 'Shipments',
  // requests: 'Requests'
})
const overviewData = ref(props.dataSet || [])

const rootChart = ref(null)
const loadChart = () => {
  if(Number(props.dataSet?.length ?? 0) >= 1) {
    overviewData.value = props.dataSet
  }

  let root = $am5.Root.new(chartdiv.value)

  root.setThemes([
    $am5themes_Animated.default.new(root)
  ]);

  let chart = root.container.children.push($am5xy.XYChart.new(root, {
    panX: true,
    panY: true,
    wheelX: "none",
    wheelY: "none",
    paddingLeft: 10,
  }));

  chart.zoomOutButton.set("forceHidden", true);

  let legend = chart.children.push($am5.Legend.new(root, {
    centerX: $am5.p100,
    x: $am5.p100,
  }))

  let cursor = chart.set("cursor", $am5xy.XYCursor.new(root, {}));
  cursor.lineY.set("visible", false);

  let xRenderer = $am5xy.AxisRendererX.new(root, {
    cellStartLocation: 0.1,
    cellEndLocation: 0.9,
    minGridDistance: 30,
    minorGridEnabled: true
  })

  let xAxis = chart.xAxes.push($am5xy.CategoryAxis.new(root, {
    categoryField: "period",
    renderer: xRenderer,
    tooltip: $am5.Tooltip.new(root, {}),
    maxDeviation: 0.3,
  }));

  xRenderer.grid.template.setAll({
    centerY: $am5.p50,
    centerX: 0,
  })
  xRenderer.grid.template.set("visible", false);

  xAxis.data.setAll(overviewData.value);

  let yAxis = chart.yAxes.push($am5xy.ValueAxis.new(root, {
    maxDeviation: 0.3,
    min: 0,
    renderer: $am5xy.AxisRendererY.new(root, {}),
  }));

  const setSeries = (name, fieldName) => {
    let series = chart.series.push($am5xy.LineSeries.new(root, {
      name: name,
      xAxis: xAxis,
      yAxis: yAxis,
      valueYField: fieldName,
      categoryXField: "period"
    }));

    series.strokes.template.setAll({
      strokeWidth: 2,
      tooltipText: "{name}, {categoryX}:{valueY}"
    });

    series.data.setAll(overviewData.value);

    series.bullets.push(function () {
      return $am5.Bullet.new(root, {
        locationY: 0,
        sprite: $am5.Circle.new(root, {
          radius: 4,
          fill: series.get("fill")
        })
      });
    });

    legend.data.push(series);
  }

  for(const [key, val] of Object.entries(overviewLabels.value)) {
    setSeries(val, key)
  }

  rootChart.value = root
}

watch(() => props.dataSet, () => {
  if(Number(props.dataSet?.length ?? 0) >= 1) {
    overviewData.value = props.dataSet
    if(rootChart.value) {
      rootChart.value.dispose()
    }
    loadChart()
  }
})

onMounted(() => {
  if(Number(props.dataSet?.length ?? 0) >= 1) {
    overviewData.value = props.dataSet
    loadChart()
  }
})
onBeforeUnmount(() => {
  if(rootChart.value) {
    rootChart.value.dispose()
  }
})
</script>

<template>
  <div ref="chartdiv" style="width: 100%; height: 550px;"></div>
</template>