<template>
    <canvas ref="chartEl"></canvas>
</template>

<script lang="ts" setup>
import { watch, onMounted, onUnmounted, ref, shallowRef } from "vue";
import { Chart } from "chart.js";
import number from "@/filters/number";
import * as os from "@/os";
import { defaultStore } from "@/store";
import { useChartTooltip } from "@/scripts/use-chart-tooltip";
import { chartVLine } from "@/scripts/chart-vline";
import { alpha } from "@/scripts/color";
import { initChart } from "@/scripts/init-chart";

initChart();

const props = defineProps<{
    type: string;
}>();

const chartEl = shallowRef<HTMLCanvasElement>(null);

const { handler: externalTooltipHandler } = useChartTooltip();

let chartInstance: Chart;

function setData(values) {
    if (chartInstance == null) return;
    for (const value of values) {
        chartInstance.data.labels.push("");
        chartInstance.data.datasets[0].data.push(value);
        if (chartInstance.data.datasets[0].data.length > 100) {
            chartInstance.data.labels.shift();
            chartInstance.data.datasets[0].data.shift();
        }
    }
    chartInstance.update();
}

function pushData(value) {
    if (chartInstance == null) return;
    chartInstance.data.labels.push("");
    chartInstance.data.datasets[0].data.push(value);
    if (chartInstance.data.datasets[0].data.length > 100) {
        chartInstance.data.labels.shift();
        chartInstance.data.datasets[0].data.shift();
    }
    chartInstance.update();
}

const label =
    props.type === "process"
        ? "Process"
        : props.type === "active"
          ? "Active"
          : props.type === "delayed"
            ? "Delayed"
            : props.type === "waiting"
              ? "Waiting"
              : ("?" as never);

const color =
    props.type === "process"
        ? "#c4a7e7"
        : props.type === "active"
          ? "#31748f"
          : props.type === "delayed"
            ? "#eb6f92"
            : props.type === "waiting"
              ? "#f6c177"
              : ("?" as never);

onMounted(() => {
    const vLineColor = defaultStore.state.darkMode
        ? "rgba(255, 255, 255, 0.2)"
        : "rgba(0, 0, 0, 0.2)";

    chartInstance = new Chart(chartEl.value, {
        type: "line",
        data: {
            labels: [],
            datasets: [
                {
                    label: label,
                    pointRadius: 0,
                    tension: 0.3,
                    borderWidth: 2,
                    borderJoinStyle: "round",
                    borderColor: color,
                    backgroundColor: alpha(color, 0.2),
                    fill: true,
                    data: [],
                },
            ],
        },
        options: {
            aspectRatio: 2.5,
            layout: {
                padding: {
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0,
                },
            },
            scales: {
                x: {
                    grid: {
                        display: false,
                    },
                    ticks: {
                        display: false,
                        maxTicksLimit: 10,
                    },
                },
                y: {
                    min: 0,
                    grid: {},
                },
            },
            interaction: {
                intersect: false,
            },
            plugins: {
                legend: {
                    display: false,
                },
                tooltip: {
                    enabled: false,
                    mode: "index",
                    animation: {
                        duration: 0,
                    },
                    external: externalTooltipHandler,
                },
            },
        },
        plugins: [chartVLine(vLineColor)],
    });
});

defineExpose({
    setData,
    pushData,
});
</script>

<style lang="scss" scoped></style>
