import { FlagsmithFeatureAdapter } from '@vuetify/v0/features/adapters/flagsmith'

pnpm add flagsmith

import { createApp } from 'vue'
import { createFeaturesPlugin } from '@vuetify/v0/features'
import { FlagsmithFeatureAdapter } from '@vuetify/v0/features/adapters/flagsmith'
import flagsmith from 'flagsmith'

const app = createApp(App)

const adapter = new FlagsmithFeatureAdapter(flagsmith, {
  environmentID: 'your-environment-id',
  api: 'https://edge.api.flagsmith.com/api/v1/'
})

app.use(createFeaturesPlugin({
  adapter
}))

import { createFeaturesPlugin } from '@vuetify/v0/features'
import { FlagsmithFeatureAdapter } from '@vuetify/v0/features/adapters/flagsmith'
import flagsmith from 'flagsmith'

const adapter = new FlagsmithFeatureAdapter(flagsmith, {
  environmentID: 'your-environment-id',
  identity: 'user-123',
  traits: {
    email: '[email protected]',
    plan: 'pro'
  }
})

const app = createApp(App)
app.use(createFeaturesPlugin({ adapter }))

<script setup lang="ts">
import { useFeatures } from '@vuetify/v0/features'

const features = useFeatures()

// Check if feature is enabled
const hasNewUI = computed(() => features.has('new-ui'))

// Get feature variation
const theme = computed(() => features.variation('theme', 'default'))
</script>

<template>
  <div>
    <NewUI v-if="hasNewUI" />
    <OldUI v-else />
    
    <div :class="`theme-${theme}`">
      Content
    </div>
  </div>
</template>

const features = useFeatures()

// Check if enabled
if (features.has('dark-mode')) {
  // Feature is enabled
}

// Get all selected features
features.selectedIds.value // ['dark-mode', 'new-dashboard']

const features = useFeatures()

// Get variation value
const buttonColor = features.variation('button-style', 'blue')
// Returns the variation value or 'blue' fallback

// Variation structure
interface FlagWithVariation {
  $value: boolean        // Flag enabled state
  $variation: unknown    // Variation data
}

import type { IInitConfig } from 'flagsmith'

const adapter = new FlagsmithFeatureAdapter(flagsmith, {
  // Required
  environmentID: string
  
  // Optional
  api?: string                    // API URL
  identity?: string               // User identity
  traits?: Record<string, any>    // User traits
  defaultFlags?: IFlags           // Default flags
  onChange?: (oldFlags, params, loadingState) => void
  cacheFlags?: boolean
  enableAnalytics?: boolean
  preventFetch?: boolean
})

import { watch } from 'vue'

const features = useFeatures()

watch(features.selectedIds, (newFlags) => {
  console.log('Flags changed:', newFlags)
})

const adapter = new FlagsmithFeatureAdapter(flagsmith, {
  environmentID: 'your-env-id',
  onChange: (oldFlags, params, loadingState) => {
    console.log('Flags updated:', loadingState)
    
    // Custom logic on flag changes
    if (loadingState.isFetching) {
      console.log('Fetching flags...')
    }
  }
})

import { FlagsmithFeatureAdapter } from '@vuetify/v0/features/adapters/flagsmith'
import { PostHogFeatureAdapter } from '@vuetify/v0/features/adapters/posthog'
import flagsmith from 'flagsmith'
import posthog from 'posthog-js'

const flagsmithAdapter = new FlagsmithFeatureAdapter(flagsmith, {
  environmentID: 'flagsmith-env-id'
})

const posthogAdapter = new PostHogFeatureAdapter(posthog)

app.use(createFeaturesPlugin({
  adapter: [flagsmithAdapter, posthogAdapter]
}))

// Features from both sources are merged

import type { IFlagsmith, IInitConfig } from 'flagsmith'

const client: IFlagsmith = flagsmith

const config: IInitConfig = {
  environmentID: 'env-123',
  identity: 'user-456'
}

const adapter = new FlagsmithFeatureAdapter(client, config)

// Flagsmith flag
{
  'feature-name': {
    enabled: true,
    value: 'variant-a'
  }
}

// Transformed to
{
  'feature-name': {
    $value: true,
    $variation: 'variant-a'
  }
}

// Boolean-only flag
{
  'simple-flag': {
    enabled: true,
    value: null
  }
}

// Transformed to
{
  'simple-flag': true
}

// Cleanup is handled automatically
const adapter = new FlagsmithFeatureAdapter(flagsmith, config)

// On app unmount, adapter.dispose() is called automatically

class FlagsmithFeatureAdapter implements FeaturesAdapterInterface

constructor(
  client: IFlagsmith,
  options: IInitConfig
)

type FeaturesAdapterFlags = Record<string, boolean | {
  $value: boolean
  $variation: unknown
}>