import { useQuery, useResult } from '@vue/apollo-composable'
import gql from 'graphql-tag'

export interface UserAccountProvider {
  id: string
  name: string
  url?: string
  logo?: string
  logoDark?: string
}

export const userAccountProviderFragment = gql`
fragment userAccountProvider on UserAccountProvider {
  id
  name
  url
  logo
  logoDark
}
`

export function useUserAccountProviders () {
  const { result, loading } = useQuery(gql`
    query userAccountProviders {
      userAccountProviders {
        ...userAccountProvider
      }
    }
    ${userAccountProviderFragment}
  `)

  const userAccountProviders = useResult<UserAccountProvider[], UserAccountProvider[]>(result, [])

  return {
    userAccountProviders,
    loading,
  }
}