import { provideApolloClient, useMutation } from '@vue/apollo-composable';
import apolloClients from '@/setup/apollo';
import { graphql } from '@/__generated__/gql';

// need to to this when outside of a vue setup function, so apollo knows where to look for the client
const { privateApolloClient } = apolloClients;
provideApolloClient(privateApolloClient);

const deleteHighlightMutation = graphql(`
  mutation DeleteHighlight($input: DeleteHighlightInput!) {
    deleteHighlight(input: $input) {
      success
    }
  }
`);

export const updateHighlightMutation = graphql(`
  mutation UpdateHighlight($input: UpdateHighlightInput!) {
    updateHighlight(input: $input) {
      highlight {
        ...HighlightParts
      }
    }
  }
`);

export const addHighlightMutation = graphql(`
  mutation AddHighlight($input: AddHighlightInput!) {
    addHighlight(input: $input) {
      __typename
      highlight {
        ...HighlightParts
      }
    }
  }
`);

export const addContentHighlightMutation = graphql(`
  mutation AddContentHighlight($input: AddContentHighlightInput!) {
    addContentHighlight(input: $input) {
      __typename
      highlight {
        ...HighlightParts
      }
    }
  }
`);

const { mutate: doCreateHighlight } = useMutation(addHighlightMutation);
const { mutate: doCreateContentHighlight } = useMutation(addContentHighlightMutation);
const { mutate: doDeleteHighlight } = useMutation(deleteHighlightMutation);
const { mutate: doUpdateHighlight } = useMutation(updateHighlightMutation);

export { doDeleteHighlight, doUpdateHighlight, doCreateHighlight, doCreateContentHighlight };