import { ref, type Ref } from 'vue'
import type { DevModeToggle } from '../components/FdsDevMode/types'

export type DevModeRegisteredToggle = DevModeToggle

type DevModeTogglesApi = {
  toggles: Ref<DevModeRegisteredToggle[]>
  toggleChecked: Ref<Record<string, boolean>>
  toggleSelected: Ref<Record<string, string>>
  register: (toggle: DevModeRegisteredToggle) => void
  unregister: (key: string) => void
}

const getToggleType = (toggle: DevModeRegisteredToggle) => toggle.type ?? 'check'

let devModeTogglesInstance: DevModeTogglesApi | null = null

function createDevModeToggles(): DevModeTogglesApi {
  const toggles = ref<DevModeRegisteredToggle[]>([])
  const toggleChecked = ref<Record<string, boolean>>({})
  const toggleSelected = ref<Record<string, string>>({})

  const register = (toggle: DevModeRegisteredToggle) => {
    if (toggles.value.some((entry) => entry.key === toggle.key)) return

    toggles.value = [...toggles.value, toggle]

    const type = getToggleType(toggle)
    if (type === 'check' && !(toggle.key in toggleChecked.value)) {
      toggleChecked.value = { ...toggleChecked.value, [toggle.key]: false }
    }

    if (toggle.type === 'radio' && !(toggle.group in toggleSelected.value)) {
      toggleSelected.value = { ...toggleSelected.value, [toggle.group]: toggle.value }
    }
  }

  const unregister = (key: string) => {
    toggles.value = toggles.value.filter((entry) => entry.key !== key)
    const { [key]: _removed, ...rest } = toggleChecked.value
    toggleChecked.value = rest
  }

  return {
    toggles,
    toggleChecked,
    toggleSelected,
    register,
    unregister,
  }
}

/** Register DevMode quick-setting toggles from anywhere in the consumer app. */
export function useDevModeToggles() {
  if (!devModeTogglesInstance) {
    devModeTogglesInstance = createDevModeToggles()
  }
  return devModeTogglesInstance
}