import { storeToRefs } from 'pinia'
import type { Component, ComputedRef } from 'vue'
import { computed } from 'vue'
import { resolveDrawerComponent } from '@/composables/drawerRegistry'
import { useShellUiStore } from '@/stores/useShellUiStore'

// Thin facade over useShellUiStore.drawer (RFC-WS-GUI-REDESIGN AD-G4,
// issue 5). NOT a module-level ref singleton: state lives in the Pinia
// store so Playwright CT can drive the drawer via @pinia/testing
// without rendering the shell, and tests don't leak state across cases.

export interface UseRightDrawer {
  isOpen: ComputedRef<boolean>
  component: ComputedRef<string | null>
  props: ComputedRef<Record<string, unknown>>
  open: (component: string, props?: Record<string, unknown>) => void
  close: () => void
  resolveDrawerComponent: (name: string | null | undefined) => Component | null
}

export function useRightDrawer(): UseRightDrawer {
  const store = useShellUiStore()
  const { drawer } = storeToRefs(store)

  return {
    isOpen: computed(() => drawer.value.isOpen),
    component: computed(() => drawer.value.component),
    props: computed(() => drawer.value.props),
    open: (component, props = {}) => store.openDrawer(component, props),
    close: () => store.closeDrawer(),
    resolveDrawerComponent,
  }
}