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

export function useDocumentHistory (id: Ref<string>, collection: string) {
  const query = useQuery(gql`
    query documentHistory ($id: ID!, $collection: String!) {
      documentHistory(id: $id, collection: $collection) {
        id
        time
        action
        user {
          id
          name
          avatar
        }
      }
    }
  `, () => ({
    id: id.value,
    collection,
  }), {
    fetchPolicy: 'cache-and-network',
  })
  const history = useResult(query.result, [])
  const reverseHistory = computed(() => history.value.slice().reverse())
  return {
    history,
    reverseHistory,
    ...query,
  }
}