<script setup lang="ts">
import { inject } from 'vue'
import { ChartConfigSymbol, type ChartConfig } from '.'

const props = withDefaults(defineProps<{
  labelKey?: string
  nameKey?: string
  indicator?: 'dot' | 'line' | 'dashed'
  hideLabel?: boolean
  hideIndicator?: boolean
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  payload?: Array<{ name: string; value: number; color: string; dataKey: string }>
  label?: string
  class?: string
}>(), {
  indicator: 'dot',
  hideLabel: false,
  hideIndicator: false,
})

const config = inject(ChartConfigSymbol)

function getPayloadConfig(key: string) {
  return config?.value?.[key]
}
</script>

<template>
  <div class="rounded-lg border bg-background px-3 py-2 shadow-xl">
    <template v-if="!hideLabel && label">
      <div class="mb-1 font-medium">
        {{ label }}
      </div>
    </template>
    <div class="flex flex-col gap-0.5">
      <template v-for="item in payload" :key="item.name">
        <div class="flex items-center gap-2">
          <template v-if="!hideIndicator">
            <span
              v-if="indicator === 'dot'"
              class="size-2.5 rounded-full"
              :style="{ backgroundColor: item.color }"
            />
            <span
              v-else-if="indicator === 'line'"
              class="h-0.5 w-4"
              :style="{ backgroundColor: item.color }"
            />
            <span
              v-else
              class="h-0.5 w-4 border-t-2 border-dashed"
              :style="{ borderColor: item.color }"
            />
          </template>
          <span class="text-muted-foreground">
            {{ getPayloadConfig(item.dataKey)?.label ?? item.name }}
          </span>
          <span class="ml-auto font-medium tabular-nums text-foreground">
            {{ item.value.toLocaleString('id-ID') }}
          </span>
        </div>
      </template>
    </div>
  </div>
</template>
