import { App, inject, InjectionKey } from "vue"
import { Plugin } from "../types"
import type { I18n } from "vue-i18n"
import { Visuals } from "./logic"

const key = Symbol("visuals-plugin") as InjectionKey<Visuals>

export class VisualsPlugin extends Plugin {
	constructor(i18n: I18n) {
		super()
		this.instance = new Visuals(i18n)
		this.i18n = this.instance.lang.i18n
	}
	private readonly instance: Visuals
	readonly i18n: I18n

	public install = (app: App) => {
		app.use(this.i18n)
		app.provide(key, this.instance)
	}
}

export const useVisuals = () => inject<Visuals>(key)

/**
 * Vue Plugin for visual changes
 * - Color Mode & Language
 *
 * ***Usage:***
 * ```ts
 * import Visuals from "vvic-utils/visuals"
 * app.use(new Visuals(i18n))
 * ```
 */
export default VisualsPlugin