gami-web/app/composables/useAboutPopup.ts

import { reactive, readonly, ref } from 'vue'

export type AboutItemKey
  = | 'privacyPolicy'
    | 'termsOfService'
    | 'communityGuideline'
    | 'broadcasterAgreement'
    | 'aboutUs'
    | 'contactUs'
    | 'childSafetyPolicy'
    | 'playmateAgreement'

export interface AboutPopupOptions {
  /**
   * Called when user clicks one of the items.
   * The popup will be closed automatically after calling it.
   */
  onSelect?: (key: AboutItemKey) => void
}

export interface AboutPopupState {
  visible: boolean
}

const state = reactive<AboutPopupState>({
  visible: false,
})

const selectHandler = ref<((key: AboutItemKey) => void) | null>(null)

const open = (options?: AboutPopupOptions) => {
  selectHandler.value = options?.onSelect ?? null
  state.visible = true
}

const close = () => {
  state.visible = false
}

const select = (key: AboutItemKey) => {
  const handler = selectHandler.value
  if (handler) handler(key)

  state.visible = false
}

export const useAboutPopup = () => {
  return {
    state: readonly(state),
    open,
    close,
    select,
  }
}