import type { Component, InjectionKey, Ref } from 'vue'
import { createApp, h, ref } from 'vue'

export const ChartConfigSymbol: InjectionKey<Ref<ChartConfig>> = Symbol('chartConfig')

export type ChartConfig = {
  [key in string]: {
    label?: string
    icon?: Component
    color?: string
    theme?: Record<string, string>
  }
}

export { default as ChartContainer } from './ChartContainer.vue'
export { default as ChartTooltip } from './ChartTooltip.vue'
export { default as ChartTooltipContent } from './ChartTooltipContent.vue'
export { default as ChartCrosshair } from './ChartCrosshair.vue'
export { default as ChartLegend } from './ChartLegend.vue'
export { default as ChartLegendContent } from './ChartLegendContent.vue'

export function componentToString(
  config: ChartConfig,
  component: Component,
  props?: any,
) {
  if (typeof window === 'undefined') return ''
  const container = document.createElement('div')
  const app = createApp({
    render() {
      return h(component, props)
    },
  })
  app.provide(ChartConfigSymbol, ref(config))
  app.mount(container)
  const html = container.innerHTML
  app.unmount()
  return html
}