import { Sparkler } from '@moefy-canvas/theme-sparkler'

const el = document.getElementById('moefy-canvas')
const sparkler = new Sparkler()
sparkler.mount(el as HTMLCanvasElement)

import {
   Sparkler,
   SparklerMode,
   type SparklerConfig,
   type CanvasOptions,
   MAX_Z_INDEX,
} from '@moefy-canvas/theme-sparkler'

const themeConfig: SparklerConfig = {
   mode: SparklerMode.TRAIL,
}

const canvasOptions: CanvasOptions = {
   opacity: 1,
   zIndex: MAX_Z_INDEX,
}

const el = document.getElementById('moefy-canvas')
const sparkler = new Sparkler(themeConfig, canvasOptions)
sparkler.mount(el as HTMLCanvasElement)

export interface CanvasOptions {
   opacity?: number // default: 1
   zIndex?: number // default: 0
}

export type ThemeConfig = Record<string, any>

export abstract class Theme<T extends ThemeConfig> {
   constructor(themeConfig?: T, canvasOptions?: CanvasOptions) {}
   abstract mount(el: HTMLCanvasElement): void
   abstract unmount(): void
}