import { useCallback, useEffect } from 'react'
import gql from 'graphql-tag'
import { useQuery } from '@apollo/react-hooks'
import { frameDom } from '@app/managers'

const GET_AUTOFIX_STATE = gql`
  query getAutoFixState {
    autoFixEnabled @client
  }
`

export function useAutoFix() {
  const { data, client } = useQuery(GET_AUTOFIX_STATE, { ssr: false })
  const autoFixEnabled = data?.autoFixEnabled

  const setAutoFix = useCallback(
    (enabled: any) => {
      client.writeData({
        data: {
          autoFixEnabled: enabled,
        },
      })
    },
    [client]
  )

  return {
    autoFixEnabled,
    setAutoFix,
  }
}
