<script setup>
import { useLayout } from '../../../layout/composables/layout';
import { ref, watch } from 'vue';

const props = defineProps({
    class: {
        type: String,
        default: ''
    },
    data: {
        type: Array,
        default: () => [80, 20]
    },
    labels: {
        type: Array,
        default: () => ['Score', 'Gray Area']
    }
});

const chartData = ref({});
const chartOptions = ref({});
const chartDim = ref({ width: '100%', height: '100%' });
const { isDarkTheme } = useLayout();

watch(
    () => isDarkTheme.value,
    () => {
        chartData.value = setChartData();
        chartOptions.value = setChartOptions();
    },
    { immediate: true }
);

function setChartData() {
    const rootStyles = getComputedStyle(document.documentElement);
    const surface200Color = rootStyles.getPropertyValue('--p-surface-200');
    const surface800Color = rootStyles.getPropertyValue('--p-surface-800');

    return {
        labels: props.labels,
        datasets: [
            {
                label: '',
                data: props.data,
                backgroundColor: (context) => {
                    if (!context.chart.chartArea) {
                        return;
                    }
                    const {
                        ctx,
                        chartArea: { width, height }
                    } = context.chart;
                    chartDim.value.width = width;
                    chartDim.value.height = height;
                    const gradientBg = ctx.createLinearGradient(0, 0, width, 0);
                    gradientBg.addColorStop(0, 'rgba(220, 38, 38, 1)');
                    gradientBg.addColorStop(0.5, 'rgba(250, 204, 21, 1)');
                    gradientBg.addColorStop(1, 'rgba(34, 197, 94, 1)');

                    return [gradientBg, isDarkTheme.value ? surface800Color : surface200Color];
                },
                borderWidth: 0,
                borderRadius: 99,
                cutout: '88%',
                circumference: 180,
                rotation: 270
            }
        ]
    };
}

function setChartOptions() {
    return {
        aspectRatio: 1.5,
        plugins: {
            legend: {
                display: false
            },
            tooltip: {
                enabled: false
            }
        }
    };
}
</script>

<template>
    <div :class="class" class="relative min-h-56 flex items-center justify-center">
        <Chart type="doughnut" :data="chartData" :options="chartOptions" class="h-auto relative z-50 mx-auto cursor-pointer" />
        <div class="absolute h-full top-[3.75rem] left-1/2 -translate-x-1/2" :style="{ width: chartDim.width - 55 + 'px' }">
            <svg class="w-full h-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 238 120" fill="none">
                <path
                    d="M235 120C235 88.9697 222.779 59.2103 201.024 37.2685C179.27 15.3268 149.765 3 119 3C88.2349 3 58.7298 15.3267 36.9756 37.2685C15.2214 59.2103 3 88.9697 3 120"
                    class="stroke-surface-200 dark:stroke-surface-800"
                    stroke-width="6"
                    stroke-dasharray="0.7 4"
                />
            </svg>
        </div>
        <div class="absolute z-20 text-surface-950 top-0 left-1/2 -translate-x-1/2 flex flex-col items-center justify-end transition-all p-5" :style="{ width: chartDim.width + 'px', height: chartDim.height + 'px' }">
            <span class="title-h3">{{ data[0] }}</span>
            <span class="body-medium -mt-1">{{ labels[0] }}</span>
        </div>
    </div>
</template>
