<script setup lang="ts">
import { computed, ref } from 'vue'
import { ChartType } from '@/Types/types'
import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue"
import VueApexCharts from "vue3-apexcharts"

const props = defineProps<{
    title: string
    height: number | string
    series: number[]
    labels: string[]
    total?: number
    options?: object
}>()

const chartOptions = computed(() => ({
    chart: {
        type: 'donut',
        background: 'transparent',
        fontFamily: 'inherit',
        animations: { enabled: false },
    },
    theme: { mode: 'dark' },
    labels: props.labels,
    colors: ['#4da6ff', '#ffc107', '#a150d5', '#22c55e', '#f97316', '#e11d48', '#06b6d4', 'pink'],
    dataLabels: {
        enabled: true,
        formatter: (val: number) => `${Math.round(val)}%`,
        style: { fontSize: '12px', fontWeight: 400 },
        dropShadow: { enabled: false },
    },
    plotOptions: {
        pie: {
            donut: {
                size: '60%',
                labels: {
                    show: true,
                    total: {
                        show: true,
                        label: 'Total',
                        fontSize: '13px',
                        color: '#556677',
                        formatter: () => (props.total ?? props.series.reduce((a, b) => a + b, 0)).toString(),
                    },
                    value: {
                        fontSize: '22px',
                        fontWeight: 500,
                        color: '#e0e6f0',
                    },
                },
            },
        },
    },
    legend: {
        position: 'bottom',
        labels: { colors: '#778899' },
        markers: { width: 8, height: 8, radius: 2 },
        itemMargin: { horizontal: 12, vertical: 4 },
    },
    stroke: { width: 0 },
    tooltip: {
        theme: 'dark',
        y: { formatter: (val: number) => `${val} flights` },
    },
}))

</script>

<template>
    <div class="chart-wrap">
        <div class="chart-title">{{ title }}</div>
        <VueApexCharts
            type="donut"
            :height="height"
            :options="options ?? chartOptions"
            :series="series"
        />
    </div>
</template>

<style scoped>
.chart-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chart-title {
    font-size: 13px;
    font-weight: 500;
    color: #556677;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.chart-hidden {
    visibility: hidden;
}

:deep(svg) {
    outline: none;
}
</style>
