import { onMounted, onUnmounted } from 'vue'
import { Pane } from 'tweakpane'
import * as EssentialsPlugin from '@tweakpane/plugin-essentials'
import { useLoop } from './useLoop/useLoop'

let pane: Pane
let fpsGraph: any

export const useTweakPane = () => {
  pane = new Pane({
    container: document.getElementById('tres-container') || undefined,
  })
  pane.registerPlugin(EssentialsPlugin)

  fpsGraph = pane.addBlade({
    view: 'fpsgraph',
    label: 'fpsgraph',
  })

  function disposeTweakPane() {
    if (pane) {
      pane.dispose()
    }
  }

  onMounted(() => {
    useLoop(
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      () => {},
      () => {
        fpsGraph.begin()
      },
      () => {
        fpsGraph.end()
      },
    )
  })

  onUnmounted(() => {
    disposeTweakPane()
  })

  return { pane, fpsGraph, disposeTweakPane }
}