<template>
    <template v-if="info">
        <div class="mt-2 flex flex-col gap-1">
            <div class="flex items-center gap-1 text-sm">
                <UIcon class="flex-shrink-0" name="i-simple-icons-github" />
                <ULink class="line-clamp-1 underline" :to="info.url" target="_blank" :title="info.description">{{ info.name }}</ULink>
                <UIcon class="flex-shrink-0" name="i-heroicons-arrow-top-right-on-square" />
            </div>
        </div>
    </template>
    <div class="w-full relative" style="aspect-ratio: 2/1">
        <canvas ref="refChart" :aria-label="title"></canvas>
    </div>
</template>
<script setup>
import { Chart } from 'chart.js/auto';
const colorMode = useColorMode()

const props = defineProps({
    type: {
        type: String,
        default: 'line'
    },
    title: {
        type: String,
        default: ''
    },
    labels: {
        type: Array,
        default: () => []
    },
    data: {
        type: Array,
        default: () => []
    },
    simple: {
        type: Boolean,
        default: false
    },
    info: {
        type: Object,
        default: () => {}
    }
})
const refChart = ref(null)
let chart
function init () {
    Chart.defaults.datasets.line.fill = true

    if (props.simple) {
        Chart.defaults.plugins.legend.display = false
    }

    chart = new Chart(refChart.value, {
        type: props.type,
        data: {
            labels: props.labels,
            datasets: props.data.map(item => {
                item.backgroundColor = ['rgba(54, 162, 235, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)']
                item.borderColor = ['rgb(54, 162, 235)', 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)']
                item.borderWidth = 1
                return item
            })
        },
        options: {
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: !props.simple,
                    text: props.title,
                    font: {
                        size: 14,
                        weight: 'normal'
                    }
                }
            },
            scales: {
                x: {
                    display: !props.simple,
                    grid: {
                        display: false
                    }
                },
                y: {
                    display: !props.simple,
                    grid: {
                        display: false
                    },
                    stacked: true
                }
            },
            radius: 0,
            interaction: {
                intersect: false,
            }
        }
    })
}
function destroy () {
    if (chart) {
        chart.destroy()
        chart = null
    }
}
onMounted(() => {
    nextTick(() => {
        init()
    })
})
onBeforeUnmount(() => {
    destroy()
})
watch(()=> colorMode.value, (value) => {
    let color = '#e5e7eb'
    if (value === 'dark') color = '#1f2937'
    Chart.defaults.borderColor = color
    if (chart) {
        destroy()
        init()
    }
}, { immediate: true, deep: true })
</script>
