<script setup lang="ts">
import { Bar } from 'vue-chartjs'
import { 
  Chart as ChartJS, 
  Title, 
  Tooltip, 
  Legend, 
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'
import { computed } from 'vue';

ChartJS.register(
  Title, 
  Tooltip, 
  Legend, 
  BarElement,
  CategoryScale,
  LinearScale
)

const props = defineProps<{
  chartData: {
    labels: string[],
    datasets: Array<{
      label: string,
      data: number[],
      backgroundColor?: string,
      borderColor?: string,
      borderWidth?: number
    }>
  },
  chartOptions?: any
}>()

const defaultOptions = {
  responsive: true,
  maintainAspectRatio: false,
  interaction: {
    intersect: false,
    mode: 'index'
  },
  scales: {
    x: {
      grid: {
        display: false
      }
    },
    y: {
      beginAtZero: true,
      grid: {
        display: true,
        color: 'rgba(200, 200, 200, 0.2)'
      },
      ticks: {
        callback: function(value) {
          return value.toLocaleString('en-US', {
            style: 'currency',
            currency: 'USD',
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
          });
        }
      }
    }
  },
  plugins: {
    legend: {
      position: 'bottom',
      labels: {
        usePointStyle: true,
        boxWidth: 10
      }
    },
    tooltip: {
      callbacks: {
        label: function(context) {
          let label = context.dataset.label || '';
          if (label) {
            label += ': ';
          }
          if (context.parsed.y !== null) {
            label += new Intl.NumberFormat('en-US', { 
              style: 'currency', 
              currency: 'USD' 
            }).format(context.parsed.y);
          }
          return label;
        }
      }
    }
  }
}

const options = computed(() => {
  return {
    ...defaultOptions,
    ...props.chartOptions
  }
})
</script>

<template>
  <div class="bar-chart">
    <Bar
      :data="chartData"
      :options="options"
    />
  </div>
</template>

<style scoped>
.bar-chart {
  min-height: 300px;
  position: relative;
}
</style>
